前言
随着 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.html --> <sortable-container> <sortable-item>1</sortable-item> <sortable-item>2</sortable-item> <sortable-item>3</sortable-item> <sortable-item>4</sortable-item> <sortable-item>5</sortable-item> </sortable-container>
可以看到，使用创建的组件非常简单。我们将 sortable-item 组件包含到 sortable-container 组件中，这样 sortable-container 即可作为 sortable-item 的拖拽容器。
总结
使用 Web Components 技术实现拖拽排序功能并不难，只要通过合理地拆分组件，就可以轻松完成这一功能。除了拖拽排序功能，Web 组件技术还能帮助我们构建隔离化的、可复用的组件。希望大家在工作和学习中加强对 Web 组件的研究和应用。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6527ed3c7d4982a6eba81283
