HTML5 中的 Drag and Drop 功能可以使用户使用鼠标或触摸屏拖动元素，将它们从一个位置移动到另一个位置。而本文将介绍如何实现屏幕任意位置拖拽功能。
拖拽基础知识
在开始实现拖拽功能之前，需要了解一些基础知识：
draggable属性：通过设置元素的draggable属性为true，使得该元素可以被拖拽。dragstart事件：当元素开始被拖拽时触发此事件，可以在该事件中设置要传递给放置目标元素的数据。dragover事件：当可拖拽的元素正在被拖动时，会触发该事件，用于指示被拖动的元素可以放置到目标区域。drop事件：当某个可拖拽的元素被放置到目标区域时，会触发该事件，在该事件中可以执行相应的操作。
实现屏幕任意位置拖拽
要实现屏幕任意位置拖拽，需要监听整个页面的 dragover 事件，并计算出当前鼠标位置与页面左上角的距离，然后再将要拖拽的元素插入到页面指定位置。
示例代码如下：
--------- -----
------
------
------------ ---- --- ---- ------------
-------
----- -
--------- ---------
----- --
---- --
------ ------
------- ------
----------------- -----
------- -----
-
--------
-------
------
---- ------------ -----------------------
--------
----- ---- - --------------------------------
--- -------- --------
---------------------------------- ----------- -
------------------------------------ ----
------- - --------- - ----------------
------- - --------- - ---------------
---
------------------------------------- ----------- -
-------------------
--------------- - ---------- - -------- - -----
-------------- - ---------- - -------- - -----
---
---------
-------
-------以上示例中，我们创建了一个红色的可拖拽元素，并将其置于页面左上角。当用户开始拖拽该元素时，我们记录下当前鼠标位置与元素左上角的距离，然后在整个页面监听 dragover 事件，在该事件触发时计算出要拖拽的元素应该被放置的位置，并将其移动到该位置。
总结
通过 HTML5 中提供的 Drag and Drop 功能，我们可以轻松实现拖拽功能。而通过本文的介绍和示例代码，你可以学习到如何实现屏幕任意位置拖拽功能，并在实际开发中灵活运用。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/28415