Internet Explorer 9+, Firefox, Opera, Chrome, and Safari support drag and drop.
Note: Drag and drop does not work in Safari 5.1.7 and earlier versions.
drag
1、设置元素可拽托：
<div draggable="true" id="dragme"></div>
2、设置元素拽托时发生的事情，通过属性ondragstart设置：
<div draggable="true" id="dragme" ondragstart="drag(event)"></div>
3、如果需要传值，通过 事件属性的方法 - dataTransfer.setData()传递:
function drag(evt) { evt.dataTransfer.setData("text/html", ev.target.id); }
drop
1、设置元素属性ondrop 和 ondragover
<div id="drop1" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
2、ondragover 用于设置where the dragged data can be droped，设置此属性是用来阻止元素的默认处理（默认情况下，data/element是不允许drop到其他元素中），使元素可以被放置：
function allowDrop(evt) { evt.preventDefault(); }
3、当元素放置的时候，通过ondrop属性处理drop事件：
function drop(evt) { evt.preventDefault(); //default is open as link on drop var data = evt.dataTransfer.getData("text/html"); //获得传递的数据 evt.target.appendChild(document.getElementById(data)); }
例子
<!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <style type="text/css"> #drop1, #drop2 { width: 5em; height: 5em; border: 1px solid #aaaaaa; margin: 1em; padding: 1em; text-align: center; line-height: 5em; float: left; } </style> <script type="text/javascript"> function allowDrop(evt) { evt.preventDefault(); } function drag(evt) { evt.dataTransfer.setData("Text", evt.target.id); } function drop(evt) { evt.preventDefault(); var data = evt.dataTransfer.getData("Text"); evt.target.appendChild(document.getElementById(data)); } </script> </head> <body> <div id="drop1" ondrop="drop(event)" ondragover="allowDrop(event)"> <div id="dragme" draggable="true" ondragstart="drag(event)">drag me</div> </div> <div id="drop2" ondrop="drop(event)" ondragover="allowDrop(event)"></div> </body> </html>