在前端的开发中，拖拽排序是一项非常常见的需求。本文将介绍如何利用 Custom Elements 实现一个拖拽排序组件，并解决在移动端的兼容性问题。
Custom Elements 简介
Custom Elements 是 Web Components 的一部分，它允许开发者定义自己的 HTML 标签以及其行为。通过自定义 HTML 标签，我们可以实现更为灵活和可复用的组件，同时也有助于提高代码的可维护性和可读性。
实现拖拽排序组件
首先，我们需要定义一个自定义 HTML 标签，并为其添加如下属性。
<my-draggable> <!-- 子元素 --> </my-draggable>
draggable：是否可拖拽。ondragstart：拖拽开始时触发的事件。ondragover：拖拽目标元素上方时触发的事件。ondragend：拖拽结束时触发的事件。
-- -------------------- ---- -------
----- ----------- ------- ----------- -
------------- -
--------
---------------------------------- ----------------------
--------------------------------- ---------------------
-------------------------------- --------------------
-
------------------ -
-- ---------
------------------------------------ -------------
-
---------------- -
-- --------
-- -------------------------- --- ------- -
-- ----
-- ---
- ---- -
-- ----
-- ---
-
-
----------------- -
-- ------
-------------------
-- ---------
------------------------- - -------
-
-接下来，我们需要为每一个子元素设置可拖拽的属性，并在拖拽结束后根据拖拽的位置进行排序。
-- -------------------- ---- -------
----- ----------- ------- ----------- -
-- ---
------------------- -
----- -------- - -------------------
------------------------ ------ -- -
------------------------------- ------
-------------------------------- -------
---
-
---------------- -
-- --------
-- -------------------------- --- ------- -
-- ----
----- -------- - -------------------
----- ----------- - ------------------------------------
----- ----------- - -------------------------------
-- ------------ --- ------------ -
----- ----------- - ----------------------
----- ----------- - ----------------------
-- ------------ - ------------ -
------------------------------ -------------
- ---- -
------------------------------ -------------------------
-
-
- ---- -
-- ----
-- ---
-
-
----------------- -
----- -------- - -------------------
------ ------------------------ -- -
----- - ---- ------ - - ------------------------------
------ - - --- - ------ - --
---
-
-解决移动端兼容性问题
在移动端的浏览器中，拖拽排序功能可能会遇到一些问题。因为移动端通常是通过手指滑动来进行操作，而不是通过鼠标拖拽。因此，我们需要对代码进行一些修改，以适应移动端的操作方式。
首先，我们需要监听触摸相关事件，而不是鼠标事件。
-- -------------------- ---- -------
----- ----------- ------- ----------- -
------------- -
--------
----------------------------------- -----------------------
---------------------------------- ----------------------
--------------------------------- ---------------------
-
------------------- -
----- - ------------- - - --
-- --------------------- --- -- -
----- - ------ ----- - - -----------------
----------- - ------
----------- - ------
--------------- - ------
-
-
------------------ -
----- - ------------- - - --
-- --------------------- --- -- -
----- - ------ ----- - - -----------------
------------- - ------
------------- - ------
--------------- - -----
-- -----
-- ---
-
-
----------------- -
-- ----------------- -
----- -------- - -------------------
----- ----------- - ------------------------------------
----- ----------- - -----------------------------------
-- ------------ --- ----------- -- ----------- -- -- -
----- ----------- - ----------------------
----- ----------- - ----------------------
-- ------------ - ------------ -
------------------------------ -------------
- ---- -
------------------------------ -------------------------
-
-
- ---- -
-- ---
-
--------------- - ------
-
-- ---
-其次，我们需要手动处理滚动条的滚动。在鼠标拖拽时，浏览器会自动处理滚动条的滚动。但是在触摸拖拽时，浏览器并不会自动处理滚动条的滚动，因此我们需要手动处理。
-- -------------------- ---- -------
----- ----------- ------- ----------- -
-- ---
------------------ -
-- ---
-- -----
----- - --------- - - -----
----- - ------------- ------- ------------ - - ----------------
----- - ----- - - -----------------
----- ----- - ------ - ------------ - --
-- ---------- - ----- - -- -
-------------- - --
- ---- -- ---------- - ----- - ------------ - ------- -
-------------- - ------------ - -------
- ---- -
-------------- -- ------
-
-
-- ---
-示例代码
完整的示例代码如下。
-- -------------------- ---- -------
----- ----------- ------- ----------- -
------------- -
--------
---------------------------------- ----------------------
--------------------------------- ---------------------
-------------------------------- --------------------
----------------------------------- -----------------------
---------------------------------- ----------------------
--------------------------------- ---------------------
-
------------------- -
----- -------- - -------------------
------------------------ ------ -- -
------------------------------- ------
-------------------------------- -------
---
-
------------------ -
-- ---------
------------------------------------ -------------
-
---------------- -
-- --------
-- -------------------------- --- ------- -
-- ----
----- -------- - -------------------
----- ----------- - ------------------------------------
----- ----------- - -------------------------------
-- ------------ --- ------------ -
----- ----------- - ----------------------
----- ----------- - ----------------------
-- ------------ - ------------ -
------------------------------ -------------
- ---- -
------------------------------ -------------------------
-
-
- ---- -
-- ----
-- ---
-
-
----------------- -
-- ------
-------------------
-- ---------
------------------------- - -------
-
------------------- -
----- - ------------- - - --
-- --------------------- --- -- -
----- - ------ ----- - - -----------------
----------- - ------
----------- - ------
--------------- - ------
-
-
------------------ -
----- - ------------- - - --
-- --------------------- --- -- -
----- - ------ ----- - - -----------------
------------- - ------
------------- - ------
--------------- - -----
-- -----
----- - --------- - - -----
----- - ------------- ------- ------------ - - ----------------
----- ----- - ------ - ------------ - --
-- ---------- - ----- - -- -
-------------- - --
- ---- -- ---------- - ----- - ------------ - ------- -
-------------- - ------------ - -------
- ---- -
-------------- -- ------
-
-
-
----------------- -
-- ----------------- -
----- -------- - -------------------
----- ----------- - ------------------------------------
----- ----------- - -----------------------------------
-- ------------ --- ----------- -- ----------- -- -- -
----- ----------- - ----------------------
----- ----------- - ----------------------
-- ------------ - ------------ -
------------------------------ -------------
- ---- -
------------------------------ -------------------------
-
-
- ---- -
-- ---
-
--------------- - ------
-
----------------- -
----- -------- - -------------------
------ ------------------------ -- -
----- - ---- ------ - - ------------------------------
------ - - --- - ------ - --
---
-
-
------------------------------------- -------------总结
通过这篇文章，我们学习了如何利用 Custom Elements 实现一个拖拽排序组件，并解决在移动端的兼容性问题。通过自定义 HTML 标签以及相关的事件和属性，我们可以轻松实现一个灵活、可复用的组件，提高代码的可维护性和可读性。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/652e151b7d4982a6ebf2592d