HTML拖放

本文概述

  • 拖放事件功能
  • HTML5拖放示例
  • 拖放操作期间的阶段
  • 支持的浏览器
HTML拖放(DnD)是HTML5的功能。它是一个功能强大的用户界面概念, 可用于在鼠标的帮助下复制, 重新排序和删除项目。你可以在元素上按住鼠标按钮并将其拖动到另一个位置。如果要将元素放在此处, 只需释放鼠标按钮。
如果要实现传统HTML4中的拖放功能, 则必须使用复杂的JavaScript编程或其他JavaScript框架(例如jQuery等)。
拖放事件功能
事件 描述
Drag 每当在拖动对象时移动鼠标时, 它将触发。
Dragstart 这是一个非常初期的阶段。当用户开始拖动对象时触发。
Dragenter 当用户将鼠标光标移到目标元素上时触发。
Dragover 当鼠标移到元素上时, 将触发此事件。
Dragleave 当鼠标离开元素时, 会触发此事件。
Drop 拖放在拖动操作结束时触发。
Dragend 当用户释放鼠标按钮以完成拖动操作时, 它将触发。
HTML5拖放示例 让我们看一个HTML 5拖放功能的示例。
要理解此示例, 你必须具有JavaScript知识。
< script> function allowDrop(ev) {ev.preventDefault(); } function drag(ev) {ev.dataTransfer.setData("text/html", ev.target.id); } function drop(ev) { ev.preventDefault(); var data = http://www.srcmini.com/ev.dataTransfer.getData("text/html"); ev.target.appendChild(document.getElementById(data)); } < /script> < p> Drag the srcmini image into the rectangle:< /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="http://www.srcmini.com/htmlpages/images/srcmini.png" alt="srcmini image" draggable="true" ondragstart="drag(event)"/>

在上面的示例中, 我们在div元素上使用了ondrop和ondragover事件, 在img标签上使用了ondragstart事件。
立即测试
输出:
将srcmini图像拖到矩形中:
HTML拖放 注意:在拖动操作过程中不会触发MouseEvent。 拖放操作期间的阶段 1)使元素可拖动
如果要使元素可拖动, 请在元素上将draggable属性设置为“ true”。例如:
< img draggable = "true">

2)拖动什么:
使用ondragstart和setData()方法。
指定拖动元素时应发生的情况。
【HTML拖放】3)放哪里:
使用ondragover事件。
4)做下降:
使用ondrop事件。
支持的浏览器
Element Chrome IE Firefox Opera Safari
拖放功能 Yes Yes Yes Yes Yes

    推荐阅读