HTML 拖放事件

📌 相关文章

📜 HTML 拖放事件

📅 最后修改于: 2020-11-01 09:00:29 🧑 作者: Mango

HTML拖放(DnD)是HTML5的功能。它是一个功能强大的用户界面概念，可用于在鼠标的帮助下复制，重新排序和删除项目。您可以在元素上按住鼠标按钮，然后将其拖动到另一个位置。如果要将元素放在此处，只需释放鼠标按钮。

如果要实现传统HTML4中的拖放功能，则必须使用复杂的JavaScript编程或其他JavaScript框架(如jQuery等)。

Event	Description
Drag	It fires every time when the mouse is moved while the object is being dragged.
Dragstart	It is a very initial stage. It fires when the user starts dragging object.
Dragenter	It fires when the user moves his/her mouse cursur over the target element.
Dragover	This event is fired when the mouse moves over an element.
Dragleave	This event is fired when the mouse leaves an element.
Drop	Drop It fires at the end of the drag operation.
Dragend	It fires when user releases the mouse button to complete the drag operation.

让我们看一个HTML 5拖放功能的示例。

要理解此示例，您必须具有JavaScript知识。


Drag the javatpoint image into the rectangle:

在上面的示例中，我们在div元素上使用了ondrop和ondragover事件，在img标签上使用了ondragstart事件。

输出：

将javatpoint图像拖到矩形中：

注意：在拖动操作过程中不会触发MouseEvent。

1)使元素可拖动

如果要使元素可拖动，请在元素上将draggable属性设置为“ true”。例如：

2)拖动什么：

使用ondragstart和setData()方法。

指定拖动元素时应发生的情况。

3)放哪里：

使用ondragover事件。

4)做下降：

使用ondrop事件。

Element	Chrome	IE	Firefox	Opera	Safari
drag and drop feature	Yes	Yes	Yes	Yes	Yes