<!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>