微信小程序之拖拽排序

在微信小程序开发中，拖拽排序是一个经常用到的功能。本文将介绍如何实现微信小程序中的拖拽排序，并分享相应的代码示例。

实现思路

实现微信小程序中的拖拽排序，需要用到以下几个步骤：

1. 给每个可以拖拽的元素添加 touchstart、touchmove、touchend 事件监听器；
2. 在 touchstart 事件中记录被拖拽元素的位置信息，并设置样式使其“脱离文档流”；
3. 在 touchmove 事件中根据手指移动距离实时调整被拖拽元素的位置，并计算出被拖拽元素与其他元素的位置关系；
4. 在 touchend 事件中根据计算出来的位置关系，交换被拖拽元素和其他元素的位置，并重置样式。

代码实现

HTML 结构：

----- ------------------
  ----- ------------ ----------------- ------------------
    ---------------------- ---------------------------------
    ------------------------------- ------------------------------
    --------
  -------
-------

JavaScript 代码：

------
  ----- -
    ----- --- -- -- -- ---
    -------------- ---
    ------------- ---
    ----------- --
    ----------- ---
  --
  ------------------- -
    ----- - ----- - - ------------------------
    ----- - ----- - - -------------
    ----- --- - ----- - ---------------------
    --------------
      -------------- ------
      ------------- -
        -------------- ------
        ----
      --
      ----------- ------
    ---
  --
  ------------------ -
    ----- - -------------- ----------- ------------- ---------- - -
      ----------
    -- -------------- --- --- -------
    ----- - ----- - - -------------
    ----- ------------- - ----- - -----------
    ----- ------ - ---------------- - --------------
    ----- ----------- - - ---------------- ---- ------ --
    -------------- ------------- ----------- ---
    ----- ----- - ------------------------ - ------------
    -- ------ --- -- -------
    ----- -------- - ------------- - ------
    -- --------- - - -- -------- -- ---------------------- -------
    ----- ---- - --------------------
    -------------------------- ---
    --------------------- -- -------------------------------
    -------------- ----- -------------- -------- ---
  --
  ---------------- -
    ----- - ----- -------------- ------------ - - ----------
    -- -------------- --- --- -------
    ----- ------- - ----------
    ----------------------------- ---
    ------------------------------------------ -- ---------------------
    --------------
      ----- --------
      -------------- ---
      ------------- ---
    ---
  --
---

总结

本文详细介绍了如何在微信小程序中实现拖拽排序，并提供了相应的代码示例。希望对大家有所帮助。

来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/907