随着前端技术的发展，越来越多的网站需要实现拖拽排序功能。在这篇文章中，我们将介绍使用 Custom Elements 实现拖拽排序的几种思路与实践。
思路一：使用 Drag & Drop API
Drag & Drop API 是 HTML5 中提供的一种实现拖拽的方案。我们可以通过 JavaScript 代码来设置元素的可拖拽属性，并且通过一些事件来实现拖拽排序的功能。
首先，我们需要定义一个 Custom Element，实现元素的拖拽属性：
class DraggableElement extends HTMLElement {
connectedCallback() {
this.setAttribute('draggable', 'true');
}
}
customElements.define('draggable-element', DraggableElement);然后，我们需要监听元素的拖拽事件，并设置拖拽时需要传递的数据：
-- -------------------- ---- -------
----- ---------------- ------- ----------- -
------------------- -
------------------------------ --------
---------------------------------- ------- -- -
---------------------------------------- --------------------
---
-
-
------------------------------------------ ------------------在拖拽结束后，我们需要监听元素的放置事件，并且交换元素的位置：
-- -------------------- ---- -------
----- ---------------- ------- ----------- -
------------------- -
------------------------------ --------
---------------------------------- ------- -- -
---------------------------------------- --------------------
---
----------------------------- ------- -- -
----- --------- - -----------------------------------------
----- ------- - -------------------
-- ------
---
-
-
------------------------------------------ ------------------这种实现方式简单易懂，但是需要通过 JavaScript 代码来实现拖拽，不太符合 Custom Elements 的特性。
思路二：使用 contenteditable
contenteditable 是 HTML 中的一个属性，可以将元素变成可编辑的状态。我们可以通过设置元素的 contentEditable 属性为 true，来实现元素的拖拽排序功能。
首先，我们需要定义一个 Custom Element，设置元素的 contentEditable 属性：
-- -------------------- ---- -------
----- --------------- ------- ----------- -
------------------- -
------------------------------------ --------
------------------------------ -- -- -
-- -------
---
-
-
----------------------------------------- -----------------当元素内容发生变化时，我们可以通过一些算法来更新元素的位置：
-- -------------------- ---- -------
----- --------------- ------- ----------- -
------------------- -
------------------------------------ --------
------------------------------ -- -- -
-- -------
----- ----- - ----------------------------
-------------------- ------ -- -
------------------ - ------
---
---
-
-
----------------------------------------- -----------------这种实现方式可以不需要 JavaScript 代码，但是需要通过算法来更新元素的位置，稍显麻烦。
思路三：使用 CSS Grid
CSS Grid 是 CSS 中的一个布局方案，可以快速实现网格布局。我们可以通过将所有元素放在一个网格中，来实现拖拽排序功能。
首先，我们需要定义一个 Custom Element，设置元素的 CSS Grid 布局：
class GridElement extends HTMLElement {
connectedCallback() {
this.setAttribute('style', 'display: grid; grid-template-columns: repeat(3, 1fr);');
}
}
customElements.define('grid-element', GridElement);然后，我们需要用 JavaScript 代码来监听元素的拖拽事件，并且将元素移动到目标位置：
-- -------------------- ---- -------
----- ----------- ------- ----------- -
------------------- -
-------------------------- --------- ----- ---------------------- --------- --------
---------------------------------- ------- -- -
---------------------------------------- --------------------
---
----------------------------- ------- -- -
----- --------- - -----------------------------------------
----- ------- - -------------------
----- ----------- - --------------------------------------------------
----- --------- - ------------------------------------------------
-- ----
---
-
-
------------------------------------- -------------这种实现方式可以不依赖算法，不需要监听 input 事件，但是需要使用 CSS Grid 布局。
总结
本文介绍了使用 Custom Elements 实现拖拽排序功能的几种思路与实践。我们可以根据需求选择不同的实现方式，实现灵活的拖拽排序功能。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/650166ba95b1f8cacdf2035f