网页对象拖放是Web开发中常见的交互方式，通过鼠标或其他指针设备将页面上的元素拖动到另一个位置或容器中。JavaScript提供了一些API，可以轻松地实现这种交互效果。
拖动事件
在JavaScript中，拖动效果是通过拖动事件来实现的。当页面上的元素开始被拖动时，会触发dragstart事件。随后，在拖动元素的过程中，会持续触发drag事件。最后，当元素被放置在新的位置时，会触发drop事件。
下面是一个示例代码，演示如何使用dragstart、drag和drop事件来实现一个简单的拖放效果：
-- -------------------- ---- -------
---- ---------------- --------------------------
---- -----------------------------
--------
----- ----------- - ---------------------------------------
----- ---------- - --------------------------------------
----------------------------------------- ------- -- -
---------------------------------------- -----------
---
--------------------------------------- ------- -- -
-----------------------
---
----------------------------------- ------- -- -
-----------------------
----- ---- - -----------------------------------------
-------------------- - ---------------
---
---------在上述代码中，我们使用了dragstart事件来设置拖动元素的数据，如文本内容等。在dropTarget元素上，我们使用了dragover事件来阻止浏览器默认的行为，并使用drop事件来获取拖动元素的数据并将其显示在页面上。
拖放API
除了拖动事件外，JavaScript还提供了一些API可以更灵活地控制拖放效果。其中包括：
- dataTransfer：用于存储和检索拖动操作期间传输的数据。
- setData(format, data)：将指定格式的数据添加到dataTransfer对象中。
- getData(format)：从dataTransfer对象中检索指定格式的数据。
- effectAllowed：指定拖动时允许的操作类型，如复制、移动或链接。
- dropEffect：指定拖放完成后执行的操作类型，如复制、移动或链接。
下面是一个示例代码，演示如何使用拖放API来实现一个更高级的拖放效果：
-- -------------------- ---- -------
---- ---------------- --------------------------
---- -----------------------------
--------
----- ----------- - ---------------------------------------
----- ---------- - --------------------------------------
----------------------------------------- ------- -- -
---------------------------------------- -----------
-------------------------------- - -------
--------------------------------------
---
--------------------------------------- -- -- -
-----------------------------------------
---
--------------------------------------- ------- -- -
-----------------------
----------------------------- - -------
----------------------------------
---
---------------------------------------- -- -- -
-------------------------------------
---
----------------------------------- ------- -- -
-----------------------
----- ---- - -----------------------------------------
-------------------- - ---------------
-------------------------------------
------------------------------------------------
------------------------------------
---
---------在上述代码中，我们使用了dragend事件来清除拖动元素的样式，并使用dragover事件来指定拖动的操作类型。我们还使用了dragleave事件来清除dropTarget元素的样式。在drop事件中，我们获取了拖动元素的数据，并在页面上显示它们。最后，我们从原始位置
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/2744