在前端开发中，我们常常需要实现一些拖拽元素的功能，例如拖拽列表项进行排序、拖拽图片生成缩略图等等。传统的做法是依赖第三方库或手写大量的 JavaScript 代码，这些方案通常比较复杂，难以维护。
自定义元素（Custom Elements）是 Web 标准中的一项新特性，能够让开发者自定义 HTML 元素并封装相关的属性和行为。通过使用自定义元素，我们可以实现更加简单、易用、可维护的拖拽元素功能。下面我们来一步步了解如何使用 Custom Elements 实现可拖拽的 DOM 元素。
基本原理
自定义元素最大的优点就是能把一些常见的界面行为封装成一个独立的元素，通过这个元素使用者可直接获取对应的功能而无需考虑太多其他细节。到了这里，想必聪明的读者已经明白了，通过自定义元素，我们可以封装一个可拖拽的元素组件，然后在实际的应用中直接使用这个组件即可实现拖拽元素的功能。
实现步骤
1. 创建自定义元素
首先，我们需要新建一个自定义元素的文件，例如 drag-elem.js，然后在该文件中使用 window.customElements.define() 方法来定义自定义元素。
class DragElem extends HTMLElement {
// ...
}
window.customElements.define('drag-elem', DragElem);2. 实现可拖拽功能
接下来，我们需要在自定义元素的 connectedCallback() 方法中实现拖拽的功能。具体实现方法如下：
-- -------------------- ---- -------
----- -------- ------- ----------- -
------------- -
--------
-- ---
----------------- - -----
-
------------------- -
-- ------
---------------------------------- --- -- -
----------------- - -
-- --------- - ----------------
-- --------- - --------------
--
-------------------------------------- ----------------------
------------------------------------ --------------------
---
-- ------
-------------------- - --- -- -
--------------- - --------- - ------------------- - -----
-------------- - --------- - ------------------- - -----
--
-- ------
------------------ - --- -- -
----------------- - -----
----------------------------------------- ----------------------
--------------------------------------- --------------------
--
-
-
----------------------------------------- ----------上面的代码中，我们通过 mousedown、mousemove 和 mouseup 事件来实现对元素的拖拽。在鼠标按下时，我们记录下元素的初始位置和鼠标的位置；在鼠标移动时，更新元素的位置；在鼠标抬起时，停止拖拽。
3. 自定义样式
最后，我们需要定义一些样式来美化这个拖拽元素。可以在元素的构造函数中添加一些样式，并通过 shadowRoot 将样式隔离在组件内部，防止样式的污染。
-- -------------------- ---- -------
----- -------- ------- ----------- -
------------- -
--------
----------- - ------------------------ ---------
----- ----- - --------------------------------
----------------- - -
----- -
-------- ------
--------- ---------
------ ------
------- ------
------- --- ----- ------
----------------- ------
------- -----
-
--
-------------------------------
-
-- ---
-实现了上面三个步骤，我们就成功地定义了一个自定义元素并添加了拖拽的功能。
示例代码
最后，附上完整的示例代码，供读者参考。
-- -------------------- ---- -------
----- -------- ------- ----------- -
------------- -
--------
----------- - ------------------------ ---------
----- ----- - --------------------------------
----------------- - -
----- -
-------- ------
--------- ---------
------ ------
------- ------
------- --- ----- ------
----------------- ------
------- -----
-
--
-------------------------------
----------------- - -----
-
------------------- -
---------------------------------- --- -- -
----------------- - -
-- --------- - ----------------
-- --------- - --------------
--
-------------------------------------- ----------------------
------------------------------------ --------------------
---
-------------------- - --- -- -
--------------- - --------- - ------------------- - -----
-------------- - --------- - ------------------- - -----
--
------------------ - --- -- -
----------------- - -----
----------------------------------------- ----------------------
--------------------------------------- --------------------
--
-
---------------------- -
------------------------------------- ----------------------
----------------------------------------- ----------------------
--------------------------------------- --------------------
-
-
----------------------------------------- ----------总结
使用自定义元素实现可拖拽的 DOM 元素，是一个简单、易用、可维护的方案。通过自定义元素，我们可以封装一些常见的界面行为，然后在应用中直接使用这个元素即可快速实现对应的功能。值得一提的是，自定义元素是 Web 标准中的一项新特性，具有广阔的应用前景，因此学习和使用自定义元素是一项值得投资的技能。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6489499448841e98947944ac