设置元素为可拖放
draggable 属性设置为 true:
<img draggable="true" />
拖动什么 - ondragstart 和 setData()
dataTransfer.setData() 方法设置被拖数据的数据类型和值:
function drag(e) {
e.dataTransfer.setData("text/html", value);
}
注："text/html"参数，我在Mac上用Safari打开，遇到过不能正常解析，解决方法把html和text位置互换一下。放到何处 - ondragover
ondragover 事件规定在何处放置被拖动的数据。
默认地，无法将数据/元素放置到其他元素中。如果需要设置允许放置，我们必须阻止对元素的默认处理方式。
event.preventDefault();
进行放置 - ondrop
调用 preventDefault() 来避免浏览器对数据的默认处理（drop 事件的默认行为是以链接形式打开）
通过 dataTransfer.getData("text/html") 方法获得被拖的数据。该方法将返回在 setData() 方法中设置为相同类型的任何数据。
function drop(e) {
e.preventDefault();
}
浏览器支持
Internet Explorer 9、Firefox、Opera 12、Chrome 以及 Safari 5 支持拖放。
注释：在 Safari 5.1.2 中不支持拖放。
示例：
Example1:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> html, body { margin: 0; padding: 0; } .drag { width: 50px; height: 50px; background: blue; display: inline-block; margin: 10px; color: white; font-size: 20px; text-align: center; line-height: 50px; cursor: move; } </style> </head> <body> <div class="drag drag1" draggable="true" ondragstart="drag(event, this)" ondragover="allowDrop(event)" ondrop="drop(event,this)">1</div> <div class="drag drag2" draggable="true" ondragstart="drag(event, this)" ondragover="allowDrop(event)" ondrop="drop(event,this)">2</div> <div class="drag drag3" draggable="true" ondragstart="drag(event, this)" ondragover="allowDrop(event)" ondrop="drop(event,this)">3</div> <script type="text/javascript"> var srcEl = null; function drag(e, el) { srcEl = el; e.dataTransfer.setData("text/html", el.innerHTML); } function drop(e, el){ e.preventDefault(); // e.stopPropagation(); if (srcEl != el) { srcEl.innerHTML = el.innerHTML; el.innerHTML = e.dataTransfer.getData("text/html"); } } function allowDrop(e) { e.preventDefault(); } </script> </body> </html>
Example2:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> html, body { margin: 0; padding: 0; } #div1 { width: 300px; height: 300px; border: 1px solid red; } #drag1 { width: 300px; height: 300px; } </style> </head> <body> <div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"></div> <img id="drag1" draggable="true" ondragstart="drag(event)" src="https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=175152409,3501278703&fm=27&gp=0.jpg" /> <script type="text/javascript"> function drag(e) { e.dataTransfer.setData("text/html", e.target.id); } function drop(e) { e.preventDefault(); e.stopPropagation(); var id = e.dataTransfer.getData('text/html'); e.target.appendChild(document.getElementById(id)); } function allowDrop(e) { e.preventDefault(); } </script> </body> </html>
W3school原文链接：http://www.w3school.com.cn/html5/html_5_draganddrop.asp