在现代的前端开发中，组件化已经成为了一种非常流行的开发方式。Web Components 就是一种用来实现组件化的技术标准，它可以让我们将一个复杂的 web 应用程序拆分成多个独立的组件，从而使得我们的代码更加清晰、易于维护和扩展。
在 Web Components 中，实现一个可拖拽的排序组件可能是非常常见的需求。本文将介绍如何使用 Web Components 和一些常见的 JavaScript 类库实现这个功能。
HTML Drag and Drop
在 Web Components 出现之前，我们可能会使用 HTML5 Drag and Drop API 来实现一个元素的拖拽和排序功能。这个 API 较为原始，但仍有很好的支持，可以作为简单的排序组件中的实现方案。
HTML Drag and Drop API 允许我们创建一个拖拽源元素，并将它所拖拽的数据传递到目标元素。实现拖拽排序功能的核心就是将这个数据在拖拽源和目标之间交换位置。
以下是一个简单的拖拽排序的示例：
--------- -----
------
------
----------- --- ------------
-------
------
--- --------------
------------- ------------
------------- ------------
------------- ------------
-----
--------
-- -------------
-------- ------------------- -
------ --------------------------
-
-- -----------
--- ----- - ------------------------------------ -----
--- ---- - - -- - - ------------- ---- -
-------------------------------------- ----------- -
--- ---- - --------------------
---------------------------- - -------
---------------------------------- ------
---
-
-- ----------------
--- -------- - ------------------------------------
------------------------------------- ----------- -
-------------------
------------------------- - -------
---
--------------------------------- ----------- -
-------------------
--- ---- - --------------------
--- ------ - -----------------------
--- ------ - ------------------------------------------- - ---- - ------
-- ------- -- ------- -
--- ------ - ------------------
--- ---- - ------------------ --- ------ - ------ - -------------------
--------------------------- ------
-
---
---------
-------
-------在这个示例中，我们使用了 dragstart 事件来启动拖拽操作，并将数据存储在数据传输对象（DataTransfer）中。我们使用 dragover 事件来阻止浏览器执行默认的行为，并将 dropEffect 设为 'move'。最后，我们使用 drop 事件来执行位置交换。
Polymer 和 Sortable.js
虽然 HTML Drag and Drop API 简单易用，但它也有一些局限性。例如，它只支持元素级别的拖拽，并且不提供手势支持和动画效果。因此，我们可能需要使用一些额外的类库来满足我们的需求。
在 Web Components 的世界里，Polymer 是一种流行的组件库和开发框架，它为我们提供了很多使用 Web Components 的便利工具和类库。
其中一个非常实用的类库就是 Sortable.js，它提供了一个高度可配置的拖拽排序解决方案，支持手势、动画和过渡效果等特性。
以下是一个使用 Polymer 和 Sortable.js 实现的拖拽排序组件的示例：
----------- -------------------
----------
-------
-- -
----------- -----
-------- --
------- --
-
-- -
-------- -----
---------------- --------------
------------ -------
-------- -----
-------------- ----
----------------- ------- -- -- -----
------- -----
------------ -----
-
--------
--- ----------
--------- --------------- ----------------- ----------
------------------ ------- -------------------------------------------
-----------
-----
-----------
--------
---------
--- ----------------
----------- -
------ -
----- ------
------ ---------- - ------ --- -
-
--
--------- ---------- -
---------------------------- -
---------- ----
------- -----
------ --------------------------
---
--
------------ ----------- -
--- ----- - --------------
-------------------- ------ ---
--
----------- ----------- -
--- ---- - -------------------- ----------- ------
-------------------- ----------- -- ------
-
---
---------
-------------在这个示例中，我们使用 Polymer 和 Sortable.js 来实现一个可排序的列表组件。我们定义了一个 items 属性来存储我们要显示的数据，然后使用 Polymer 的模板语法来循环遍历每个数据并创建一个 DOM 元素。我们为每个元素添加了 cursor:move 样式，以表示它可以被拖拽。
在组件的 attached 生命周期钩子中，我们使用 Sortable.js 来创建一个可排序的列表。我们指定了一个 handle 选择器来限制只有列表项上的拖拽手柄才能触发拖拽事件。我们还绑定了一个 onEnd 回调函数，以在元素拖拽结束时执行一些操作。
在组件中，我们还提供了一个 _deleteItem 方法，用于删除列表中的一项。当我们点击某个元素上的删除按钮时，它会触发这个方法，并从列表中移除该元素。我们也定义了一个 _onSortEnd 方法来响应 Sortable.js 的拖拽事件，并更新我们的数据模型。
结论
使用 Web Components 和一些常见的 JavaScript 类库，我们可以非常方便地实现一个可拖拽和排序的组件。无论是我们运用 HTML Drag and Drop，还是使用更高级的 Polymer 和 Sortable.js，这个功能都能让我们更好地组织我们的代码，并为用户提供更好的用户体验。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/6719a907ad1e889fe2326470