在微信小程序开发中，拖拽排序是一个经常用到的功能。本文将介绍如何实现微信小程序中的拖拽排序，并分享相应的代码示例。
实现思路
实现微信小程序中的拖拽排序，需要用到以下几个步骤：
- 给每个可以拖拽的元素添加 touchstart、touchmove、touchend 事件监听器；
- 在 touchstart 事件中记录被拖拽元素的位置信息，并设置样式使其“脱离文档流”；
- 在 touchmove 事件中根据手指移动距离实时调整被拖拽元素的位置，并计算出被拖拽元素与其他元素的位置关系；
- 在 touchend 事件中根据计算出来的位置关系，交换被拖拽元素和其他元素的位置，并重置样式。
代码实现
HTML 结构：
<view class="container">
<view class="item" wx:for="{{list}}" wx:key="{{index}}"
data-index="{{index}}" bindtouchstart="onItemTouchStart"
bindtouchmove="onItemTouchMove" bindtouchend="onItemTouchEnd">
{{item}}
</view>
</view>JavaScript 代码：
-- -------------------- ---- -------
------
----- -
----- --- -- -- -- ---
-------------- ---
------------- ---
----------- --
----------- ---
--
------------------- -
----- - ----- - - ------------------------
----- - ----- - - -------------
----- --- - ----- - ---------------------
--------------
-------------- ------
------------- -
-------------- ------
----
--
----------- ------
---
--
------------------ -
----- - -------------- ----------- ------------- ---------- - -
----------
-- -------------- --- --- -------
----- - ----- - - -------------
----- ------------- - ----- - -----------
----- ------ - ---------------- - --------------
----- ----------- - - ---------------- ---- ------ --
-------------- ------------- ----------- ---
----- ----- - ------------------------ - ------------
-- ------ --- -- -------
----- -------- - ------------- - ------
-- --------- - - -- -------- -- ---------------------- -------
----- ---- - --------------------
-------------------------- ---
--------------------- -- -------------------------------
-------------- ----- -------------- -------- ---
--
---------------- -
----- - ----- -------------- ------------ - - ----------
-- -------------- --- --- -------
----- ------- - ----------
----------------------------- ---
------------------------------------------ -- ---------------------
--------------
----- --------
-------------- ---
------------- ---
---
--
---总结
本文详细介绍了如何在微信小程序中实现拖拽排序，并提供了相应的代码示例。希望对大家有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/907