HTML5提供了一种方便而直观的用户交互方式：拖放。通过使用HTML5的Drag & Drop API，我们可以轻松地实现元素之间的拖拽操作，并且还可以在拖拽的过程中改变鼠标图标或光标样式。在本文中，我们将详细介绍如何使用HTML5的Drag & Drop API，以及如何在拖拽时改变图标或光标样式。
Drag & Drop API
Drag & Drop API由三个主要部分组成：
- 拖放源（Drag source）：拖动的元素。
- 放置目标（Drop target）：将元素拖放到的区域。
- 数据传输（Data transfer）：在拖放操作中传输数据的对象。
在开始使用Drag & Drop API之前，需要使用以下三个事件来设置拖拽源：
dragstart：当拖动元素时触发。drag：当拖动元素时连续触发。dragend：当拖动完成时触发。
同样，为了设置放置目标，需要使用以下三个事件：
dragenter：当元素进入放置目标时触发。dragover：当元素在放置目标上移动时连续触发。drop：当元素被放置到目标区域时触发。
这些事件可以使用JavaScript添加到相应的元素上。
改变图标/光标样式
当用户拖动元素时，我们可能希望改变鼠标图标或光标样式以提供更好的反馈。为了实现此功能，我们可以在dragstart事件中使用setData()方法设置一个自定义数据类型，并在dragover事件中检查该数据类型以确定是否更改图标或光标样式。
以下是一个示例代码片段，演示如何在拖动元素时更改光标样式：
--------- -----
------
------
----------- - ---- ---------------
-------
--------- -
------ ------
------- ------
------- --- ------ -----
-------- -----
----------- -----
----------- -------
---------- -----
-
--------
-------
------
---- ---------------- -----------------
---- ---
------
---- -----------------
---- -----
------
--------
--- ---------- - ---------------------------------------
--- -------- - ------------------------------------
---------------------------------------- --------------- -
---------------------------------------- ----- ---------
-------------------------------- - -------
---
------------------------------------- --------------- -
-- ----------------------------------------------- - --- -
-----------------------
-------------------------------- - ---- ----- ------
----------------------------------------- - -------
-------------------------------- - -------
-
---
-------------------------------------- --------------- -
-------------------------------- - ---- ------ ------
----------------------------------------- - ---
-------------------------------- - ----------
---
--------------------------------- --------------- -
-----------------------
----------------------------- - -----------------------------------------
-------------------------------- - ---- ------ ------
----------------------------------------- - ---
-------------------------------- - ----------
---
---------
-------
-------在这个代码片段中，我们把一个可拖动的元素和一个放置目标元素添加到了HTML文档中。当用户开始拖动drag-source元素时，我们使用setData()方法来设置一个类型为text/plain的自定义数据。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/29733