- 您好！欢迎来到鲲鹏知舟
HTML 拖放(Drag and Drop)
HTML 拖放(Drag and Drop)(DnD) 是 HTML5 的一项功能。它是一个强大的用户界面概念，用于在鼠标的帮助下复制、重新排序和删除项目。您可以在元素上按住鼠标按钮并将其拖动到另一个位置。如果要将元素放在那里，只需松开鼠标按钮。
如果你想在传统的 HTML4 中实现拖放功能，你必须使用复杂的 JavaScript 编程或其他 JavaScript 框架，如 jQuery 等。
拖放功能的事件
| 事件 | 描述 |
|---|---|
| Drag | 每次在拖动对象时移动鼠标时都会触发。 |
| Dragstart | 这是一个非常初级的阶段。当用户开始拖动对象时触发。 |
| Dragenter | 当用户将他/她的鼠标光标移到目标元素上时触发。 |
| Dragover | 当鼠标移到元素上时会触发此事件。 |
| Dragleave | 当鼠标离开元素时会触发此事件。 |
| Drop | Drop 它在拖动操作结束时触发。 |
| Dragend | 当用户释放鼠标按钮完成拖动操作时触发。 |
HTML5 拖放示例
让我们看一个 HTML 5 拖放功能的例子。
要理解这个例子，你必须具备 JavaScript 的知识。
<!DOCTYPE html>
<html>
<body>
<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>
<br>
<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 |
-
使用社交账号登录,本站支持
全部评论(0)