在前端开发中，我们经常需要使用可拖拽的元素来实现交互效果。传统的方式是使用 jQuery UI 或者其他的库来实现，但这些库可能会增加额外的依赖和代码量。而使用 Custom Elements 则可以避免这些问题，同时提供更加灵活的方式来构建可拖拽的元素。
什么是 Custom Elements
Custom Elements 是 Web Components 的一部分，它允许开发者创建自定义的 HTML 元素，并且可以在 HTML 中像普通元素一样使用。
使用 Custom Elements，我们可以通过继承 HTMLElement 类来创建自定义元素，然后可以通过 customElements.define 方法来注册该元素，最后在 HTML 中使用该元素即可。
class MyElement extends HTMLElement {
constructor() {
super();
// 初始化代码
}
}
customElements.define('my-element', MyElement);实现可拖拽的元素
在 Custom Elements 中实现可拖拽的元素，我们需要使用 draggable 属性和相关的事件来实现。具体来说，我们需要监听 dragstart、drag 和 dragend 事件，并且在 dragstart 事件中设置数据传输的类型和值，以便在拖拽过程中可以传递数据。
-- -------------------- ---- -------
----- ---------------- ------- ----------- -
------------- -
--------
---------------------------------- ----------------------
----------------------------- -----------------
-------------------------------- --------------------
-
---------------------- -
---------------------------------------- ---------
-- --------
------------------ - ------
-
----------------- -
-- --------
-
-------------------- -
-- --------
------------------ - ----
-
-
------------------------------------------ ------------------在 HTML 中使用可拖拽的元素，只需要设置 draggable 属性为 true 即可，并且可以监听 drop 和 dragover 事件来处理拖拽的逻辑。
<draggable-element draggable="true"></draggable-element> <drop-target ondrop="handleDrop" ondragover="handleDragOver"></drop-target>
示例代码
下面是一个完整的示例代码，包括可拖拽的元素和拖拽目标元素。
-- -------------------- ---- -------
--------- -----
------
------
----- --------------- --
---------------------
-------
---------- -
------ ------
------- ------
----------------- ----
------- -----
-
------------ -
------ ------
------- ------
----------------- ----------
----------- -----
-
--------
-------
------
------------------ --------------- ----------------- -------------------------------------
------------------ --------------- ----------------- -------------------------------------
------------ ------------------- -------------------------- -------------------------------------------------
--------
----- ---------------- ------- ----------- -
------------- -
--------
---------------------------------- ----------------------
----------------------------- -----------------
-------------------------------- --------------------
-
---------------------- -
---------------------------------------- ---------
------------------ - ------
-
----------------- -
-- --------
-
-------------------- -
------------------ - ----
-
-
----- ---------- ------- ----------- -
------------- -
--------
----------------------------- -----------------
--------------------------------- ---------------------
-
----------------- -
-----------------------
----- ---- - -----------------------------------------
----- ---------------- - ------------------------------
-----------------------------------
-
--------------------- -
-----------------------
-
-
------------------------------------------ ------------------
------------------------------------ ------------
-------- ----------------- -
-----------------------
----- ---- - -----------------------------------------
----- ---------------- - ------------------------------
-------------------------------------------
-
-------- --------------------- -
-----------------------
-
---------
-------
-------总结
使用 Custom Elements 构建可拖拽的元素可以避免使用额外的库和依赖，同时提供更加灵活的方式来实现交互效果。通过继承 HTMLElement 类并监听相关的事件，我们可以轻松地实现可拖拽的元素，并且可以在 HTML 中像普通元素一样使用。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/65c30718add4f0e0ffd16777