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>
