HTML 拖放(Drag and Drop)(DnD) 是 HTML5 的一项功能。它是一个强大的用户界面概念，
用于在鼠标的帮助下复制、重新排序和删除项目
。您可以在元素上按住鼠标按钮并将其拖动到另一个位置。如果要将元素放在那里，只需松开鼠标按钮。
如果你想在传统的 HTML4 中实现拖放功能，你必须使用复杂的 JavaScript 编程或其他 JavaScript 框架，如 jQuery 等。
拖放功能的事件
|
事件
|
描述
|
|
Drag
|
每次在拖动对象时移动鼠标时都会触发。
|
|
Dragstart
|
这是一个非常初级的阶段。当用户开始拖动对象时触发。
|
|
Dragenter
|
当用户将他/她的鼠标光标移到目标元素上时触发。
|
|
Dragover
|
当鼠标移到元素上时会触发此事件。
|
|
Dragleave
|
当鼠标离开元素时会触发此事件。
|
|
Drop
|
Drop 它在拖动操作结束时触发。
|
|
Dragend
|
当用户释放鼠标按钮完成拖动操作时触发。
|
HTML5 拖放示例
让我们看一个 HTML 5 拖放功能的例子。
要理解这个例子，你必须具备 JavaScript 的知识。
<!DOCTYPE html>
<script>
function allowDrop(ev) {ev.preventDefault();}
function drag(ev) {ev.dataTransfer.setData("text/html", ev.target.id);}
function drop(ev) {
ev.preventDefault();
var data = ev.dataTransfer.getData("text/html");
ev.target.appendChild(document.getElementById(data));
</script>
<p>将 rocschool 图像拖入矩形中:</p>
<div id="div1" style="width:350px;height:100px;padding:10px;border:1px solid #aaaaaa;" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<img id="drag1" src="/public/static/rocschool/img/logo.png" alt="rocschool image" draggable="true" ondragstart="drag(event)"/>
</body>
</html>
在上面的例子中，我们在 div元素上使用了ondrop 和 ondragover 事件，在 img标签上使用了 ondragstart 事件。
输出：
将 javatpoint 图像拖入矩形中：
注意：在拖动操作期间不会触发 MouseEvent。
拖放操作期间的阶段
1) 使元素可拖动
如果要使元素可拖动，请将元素上的draggable 属性设置为“true”。例如：
<img draggable = "true">
2）拖动什么：
使用 ondragstart 和 setData() 方法。
指定拖动元素时应发生的情况。
3) 去哪里：
使用 ondragover 事件。
4）做滴：
使用 ondrop 事件。
支持浏览器
|
元素
|
Chrome
|
IE
|
Firefox
|
Safari
|
Opera
|
|
drag and drop feature
|
Yes
|
Yes
|
Yes
|
Yes
|
Yes
|
111111111
