在前端开发中，实现列表项的拖拽排序是一个常见的需求。在 Material Design 中，拖拽排序也是一个重要的交互方式。本文将介绍如何使用 Material Design 实现列表项的拖拽排序，并提供示例代码。
实现思路
实现列表项的拖拽排序，需要以下几个步骤：
- 给每个列表项添加可拖拽的属性；
- 监听列表项的拖拽事件；
- 实现列表项的位置交换。
添加可拖拽属性
在 Material Design 中，使用 md-list 元素来实现列表。每个列表项使用 md-list-item 元素来表示。为了使列表项可拖拽，需要给每个 md-list-item 元素添加 draggable 属性，并将其值设为 true。
-- -------------------- ---- -------
---------
------------- -----------------
---- -
---------------
------------- -----------------
---- -
---------------
------------- -----------------
---- -
---------------
----------监听拖拽事件
为了监听列表项的拖拽事件，需要使用 dragstart、dragenter、dragover、dragleave 和 drop 事件。
dragstart事件在开始拖拽时触发；dragenter事件在拖拽的元素进入目标元素时触发；dragover事件在拖拽的元素在目标元素上移动时触发；dragleave事件在拖拽的元素离开目标元素时触发；drop事件在拖拽的元素在目标元素上释放时触发。
需要注意的是，在 dragover 事件中，需要调用 event.preventDefault() 方法，以允许拖拽元素在目标元素上释放。
-- -------------------- ---- -------
--- ------------ - -----
-------- ---------------------- -
------------ - -------------
-
-------- ---------------------- -
-- ------------- --- ------------- -
----------------------------------------
-
-
-------- --------------------- -
-----------------------
-
-------- ---------------------- -
-------------------------------------------
-
-------- ----------------- -
-------------------------------------------
-------------------------------------------------- --------------------------
-实现位置交换
在 handleDrop 方法中，使用 insertBefore 方法实现列表项位置的交换。具体来说，将被拖拽的元素插入到目标元素的后面。
示例代码
下面是一个完整的示例代码，实现了 Material Design 风格的列表项拖拽排序功能。
-- -------------------- ---- -------
--------- -----
------
------
--------------- ------ ---- ---- --- ------------
----- ---------------- -----------------------------------------------------------------------------------------------
-------
---------- -
----------------- -----
-
--------
-------
----- ------------ ---------------------
------------
---------
------------- ---------------- --------------- -- ------ -----------------
--------
---------------
----------
-------------
------- ---------------------------------------------------------------------------------------
------- ----------------------------------------------------------------------------------------------------
------- ---------------------------------------------------------------------------------------------
------- ------------------------------------------------------------------------------------------------------
--------
--------------------- ---------------
------------------- ---------------- -
------------ - ------ --- ----- --- ----- --- ----- --- ----- --- ----- ----
--
--------------- -
--- ------------ - -----
-------- ---------------------- -
------------ - -------------
-
-------- ---------------------- -
-- ------------- --- ------------- -
----------------------------------------
-
-
-------- --------------------- -
-----------------------
-
-------- ---------------------- -
-------------------------------------------
-
-------- ----------------- -
-------------------------------------------
-------------------------------------------------- --------------------------
-
--- ----- - ----------------------------------------------
--- ---- - - -- - - ------------- ---- -
-------------------------------------- ---------------- -------
-------------------------------------- ---------------- -------
------------------------------------- --------------- -------
-------------------------------------- ---------------- -------
--------------------------------- ----------- -------
-
---
---------
-------
-------总结
本文介绍了如何使用 Material Design 实现列表项的拖拽排序，包括添加可拖拽属性、监听拖拽事件和实现位置交换。通过本文的介绍，读者可以了解到 Material Design 在交互设计方面的一些思路和实现方式，同时也可以借鉴本文提供的示例代码，为自己的项目添加拖拽排序功能。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/65646568d2f5e1655ddd7db0