在前端开发中，拖放功能是非常常见的。例如，在制作网页时，我们可能需要实现拖拽图片、拖拽元素等功能。本文将介绍如何利用 Custom Elements 实现拖放功能。
Custom Elements 简介
Custom Elements 是一项 Web 标准，允许开发者创建自定义 HTML 元素并封装其功能和样式。通过使用 Custom Elements，我们可以将类似于 <input>、<button> 这样的内置 HTML 元素扩展为自定义元素。
Custom Elements 在 JavaScript 中定义并注册，然后就可以像使用内置 HTML 元素一样使用它们。这些自定义元素可以包含自定义的属性和方法，以及自己的事件处理程序。
实现拖放功能
下面我们将使用 Custom Elements 实现一个简单的拖放功能。首先，我们需要定义一个自定义元素 drag-element，该元素将表示可拖动的元素。
<drag-element></drag-element>
接下来，我们需要为 drag-element 元素添加一些属性和方法。
属性
draggable: 表示元素是否可以拖动。默认值为false。
方法
onDragStart: 拖动开始时触发的事件处理程序。onDragEnd: 拖动结束时触发的事件处理程序。
-- -------------------- ---- -------
----- ----------- ------- ----------- -
------------- -
--------
-------------- - ------
---------------- - -----
-------------- - -----
-
-
------------------------------------- -------------接下来，我们需要为 drag-element 元素添加拖动事件处理程序。我们将使用 HTML5 中的 dragstart 和 dragend 事件来实现拖动功能。
-- -------------------- ---- -------
----- ----------- ------- ----------- -
------------- -
--------
-------------- - -----
---------------- - ---------------------
-------------- - -------------------
-
---------------------- -
---------------------------------------- ---------
----------------------------- - -------
-------------------------------
-
-------------------- -
----------------------------------
-
-
------------------------------------- -------------在 handleDragStart 方法中，我们将 this.id 设置为拖动数据，并将 dropEffect 设置为 move，表示该元素可以移动。然后，我们将 dragging 类添加到元素上，以便在拖动时可以将元素突出显示。
在 handleDragEnd 方法中，我们将 dragging 类从元素上移除，以便在拖动结束后可以将元素恢复到原始状态。
现在，我们已经实现了一个可以拖动的元素。但是，我们还需要一个容器来接收拖动的元素。
我们将使用自定义元素 drop-container 来表示容器。该元素将具有以下属性和方法。
属性
accepts: 表示容器接受的元素类型。默认值为*，表示接受所有类型的元素。
方法
onDragOver: 元素被拖动到容器上时触发的事件处理程序。onDrop: 元素被拖放到容器上时触发的事件处理程序。
-- -------------------- ---- -------
----- ------------- ------- ----------- -
------------- -
--------
------------ - ----
--------------- - --------------------
----------- - ----------------
-
--------------------- -
-----------------------
----------------------------- - -------
-------------------------------
-
----------------- -
-----------------------
----- -- - -----------------------------------------
----- ------- - ----------------------------
-- ------------- --- --- -- ----------------------------- --- ------------- -
--------------------------
-
----------------------------------
-
-
--------------------------------------- ---------------在 handleDragOver 方法中，我们将 event.preventDefault() 调用，以便在元素被拖动到容器上时阻止默认操作。然后，我们将 dropEffect 设置为 move，表示容器接受移动操作。最后，我们将 dragover 类添加到容器上，以便在元素被拖动到容器上时可以将容器突出显示。
在 handleDrop 方法中，我们将 event.preventDefault() 调用，以便在元素被拖放到容器上时阻止默认操作。然后，我们获取拖动数据中的元素 ID，使用 document.getElementById 获取该元素，然后将其添加到容器中。最后，我们将 dragover 类从容器上移除，以便在拖动结束后可以将容器恢复到原始状态。
现在，我们已经实现了一个简单的拖放功能。我们可以将 drag-element 元素拖动到 drop-container 容器中，并在拖动结束时将其添加到容器中。
示例代码
-- -------------------- ---- -------
-------
------------ -
-------- ------
------ ------
------- ------
----------------- -----
-------------- ----
------- ---- -----
------- -----
----------- --------- ---- ------------
-
--------------------- -
---------- -----------
-
-------------- -
-------- ------
------ ------
------- ------
----------------- -----
------- ---- -----
-------- -----
------- --- ------ -----
-
----------------------- -
------------- -----
-
--------
------------- --------------------------
------------- --------------------------
------------- --------------------------
--------------- ----------------------------------------
--------
----- ----------- ------- ----------- -
------------- -
--------
-------------- - -----
---------------- - ---------------------
-------------- - -------------------
-
---------------------- -
---------------------------------------- ---------
----------------------------- - -------
-------------------------------
-
-------------------- -
----------------------------------
-
-
------------------------------------- -------------
----- ------------- ------- ----------- -
------------- -
--------
------------ - ----
--------------- - --------------------
----------- - ----------------
-
--------------------- -
-----------------------
----------------------------- - -------
-------------------------------
-
----------------- -
-----------------------
----- -- - -----------------------------------------
----- ------- - ----------------------------
-- ------------- --- --- -- ----------------------------- --- ------------- -
--------------------------
-
----------------------------------
-
-
--------------------------------------- ---------------
---------总结
Custom Elements 是一个非常强大的 Web 技术，可以使开发者创建自定义 HTML 元素并封装其功能和样式。通过使用 Custom Elements，我们可以轻松地实现各种复杂的功能，例如拖放、表单控件等。
在本文中，我们介绍了如何利用 Custom Elements 实现拖放功能。我们使用 dragstart、dragend、dragover 和 drop 事件来实现拖放功能，并使用自定义元素 drag-element 和 drop-container 来表示可拖动的元素和容器。
希望本文对你有所帮助，如果你有任何问题或建议，请在评论区留言。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/65bd8c27add4f0e0ff73f944