爱程序网

HTML5拖放

来源: 阅读:

HTML5拖放

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title> HTML5 拖放 </title>
<style type="text/css">
body { margin: 0; padding: 0;}
#tagetDrag { width: 200px; height: 200px; border: 1px #ccc solid;}
#oDrag { width: 100px; height: 100px; border: 1px red solid; background: #f3f3f3;}
</style>
</head>
<body>
<div id="tagetDrag"></div>
<div id="oDrag"></div>
<script type="text/javascript">
    //设置可拖动元素oDrag的draggable属性为true
    var oDragDiv = document.getElementById("oDrag"),otagetDragDiv = document.getElementById("tagetDrag");
    oDragDiv.draggable = 'true';

    //拖动什么,当ondragstart时设置setData()
    oDragDiv.ondragstart = function (ev){
        ev.dataTransfer.setData("Text", ev.target.id);
    }

    //要放到哪里 ondragover
    otagetDragDiv.ondragover = function (ev){
       ev.preventDefault(); //阻止默认
    }

    //开始放置 ondrop
    otagetDragDiv.ondrop = function (ev){
       ev.preventDefault(); //阻止默认
       var data = ev.dataTransfer.getData("Text");
       ev.target.appendChild(document.getElementById(data));
    }
</script>
</body>
</html>

 

关于爱程序网 - 联系我们 - 广告服务 - 友情链接 - 网站地图 - 版权声明 - 人才招聘 - 帮助