前言
随着 Web 技术的不断发展，开发者们有了越来越多的选择。Web Components 作为构建可复用定制化组件的标准，早已经被广泛应用在各类应用程序中。本文将向大家介绍如何使用 Web Components 技术实现可拖拽排序的功能。
实现思路
我们将使用两个组件来实现这个功能：
- sortable-container：使包含这个组件的 DOM 元素可以成为 sortable-item 的拖拽容器
- sortable-item：可以被拖拽排序的元素
sortable-container 组件的主要任务是监听 sortable-item 的 dragstart 和 dragend 事件，以及根据 sortable-item 的位置确定拖拽的目标位置。而 sortable-item 组件则负责实现拖拽行为和位置确定逻辑。
现在让我们一步一步地实现这个功能。
步骤一：创建 sortable-container 组件
首先，我们需要创建 sortable-container 组件。代码如下：
---- ----------------------- ---
----------
-------------
-----------
--------
----- ----------------- ------- ----------- -
------------- -
--------
-- ------
---------------- - -----
-- -- -------- ---------
--------------------------------- - -- -
-------------------
----- -------- - --
----- ------------- - --------------------------------
-- -------------- -- --------------------------- --- ----- -
----- ------ - --------------------------------------
-- ---------- - ---------- - ------------- - -- -
-- ------- ------------- --------
---------------- - ----------------------------------------- - --
- ---- -
-- ------- ------------- ---
---------------- - ------------------------------------------
-
-
---
-- -- ------- -------
-------------------------------- - -- -
-------------------
-- ----------------- --- ----- -
----- --------- - ------------------------------------
---------------------------- ---------------------------------
-
---------------- - -----
---
-
-
------------------------------------------- -------------------
---------这个组件继承自 HTMLElement，使用了模板和脚本创建。其中，实例化后我们为它打上了 targetIndex 标记，以便我们知道正在拖动的 sortable-item 要移动到哪个位置上。
我们监听了可拖拽元素的 dragover 和 dragend 事件。当鼠标 pointer 在 sortable-container 区域内移动时，dragover 事件会不停被触发。在这个事件中，我们通过 closest() 方法找到了鼠标指针所在的 sortable-item 元素，并通过元素的位置和鼠标指针位置的比较，确定了目标位置的索引值 targetIndex。
dragend 事件在 sortable-item 被拖动完毕时被触发。这里我们将目标元素（即正在被拖动的 sortable-item）移动到了目标索引处。
步骤二：创建 sortable-item 组件
接着，我们需要创建 sortable-item 组件。这个组件继承自 HTMLElement，代码如下：
---- ------------------ ---
----------
-------
----- -
-------- ------
------- --- ----- -----
-------- -----
-------------- -----
-
------- -
-------- -------------
------- -----
-
--------
---- -------------- -----------------
-------------
------
-----------
--------
----- ------------ ------- ----------- -
------------- -
--------
---------------------------------- - -- -
---------------------------- - -------
------------------------------------------
---
-------------------------------- - -- -
---------------------------------------------
---
-
-
-------------------------------------- --------------
---------SortableItem 组件也使用了模板和脚本创建。其中，我们定义了一个含有样式的 handle 标签来代表 sortable-item。这个 handle 标签是拖拽操作的入口点，并将包含它的元素作为一个整体来拖动。
拖拽操作时，dragstart 事件被触发。我们通过设置 dataTransfer.effectAllowed 属性来设置这个拖动的行为方式。同时，给 sortable-item 加上 dragging 类名来表示可拖动状态。
dragend 事件被拖动包含它的元素被拖动到其他容器或其他位置时触发，告知我们拖动完成。我们在这里取消了 dragging 类名。
步骤三：创建和使用 sortable-container 和 sortable-item 组件
在这个步骤中，我们将使用我们之前创建的两个组件来实现拖拽排序功能。代码如下：
---- ------------- --- -------------------- -------------------------------- -------------------------------- -------------------------------- -------------------------------- -------------------------------- ---------------------
可以看到，使用创建的组件非常简单。我们将 sortable-item 组件包含到 sortable-container 组件中，这样 sortable-container 即可作为 sortable-item 的拖拽容器。
总结
使用 Web Components 技术实现拖拽排序功能并不难，只要通过合理地拆分组件，就可以轻松完成这一功能。除了拖拽排序功能，Web 组件技术还能帮助我们构建隔离化的、可复用的组件。希望大家在工作和学习中加强对 Web 组件的研究和应用。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/6527ed3c7d4982a6eba81283