Use WeChat applet to implement drag-and-drop sorting function

Using the WeChat applet to implement the drag-and-drop sorting function Sample code

When I first started learning the WeChat applet, I always thought that it was very difficult to implement the drag-and-drop sorting function. . However, by digging into the official documentation and trying different approaches, I finally managed to implement this functionality. In this article, I will share specific code examples that implement drag-and-drop sorting functionality.

First, create a list of all sortable items in the wxml file. For example:

<view class="sortable-list">
  <view wx:for="{{items}}" wx:key="unique-key" wx:for-item="item" wx:for-index="index" class="sortable-item"
    data-index="{{index}}" bindtouchstart="onDragStart" bindtouchmove="onDragging" bindtouchend="onDragEnd"
    bindtouchcancel="onDragEnd">
    {{item}}
  </view>
</view>

In the style file wxss, we need to add some styles to the sortable items to make them draggable. For example:

.sortable-item {
  padding: 10rpx;
  background-color: #F7F7F7;
  margin-bottom: 10rpx;
  border: 1rpx solid #CCCCCC;
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
}
.sortable-item.dragging {
  opacity: 0.6;
  -webkit-transform: scale(0.95);
  transform: scale(0.95);
  z-index: 999;
  border-color: #33CCFF;
}

In the corresponding js file, we need to define some event handling functions to implement drag and drop sorting. First, we need to define a sorted list items and an index value draggingIndex in the data field of the page:

Page({
  data: {
    items: ['Item 1', 'Item 2', 'Item 3', 'Item 4', 'Item 5'],
    draggingIndex: -1
  },
  // ...
});

Next, we need to implement the drag start, drag process and drag end Event handler function:

Page({
  data: {
    // ...
  },
  onDragStart(e) {
    this.setData({
      draggingIndex: e.currentTarget.dataset.index
    });
  },
  onDragging(e) {
    const index = e.currentTarget.dataset.index;
    const draggingIndex = this.data.draggingIndex;

    if (draggingIndex !== -1) {
      const items = this.data.items;
      const [item] = items.splice(draggingIndex, 1);
      items.splice(index, 0, item);

      this.setData({
        items
      });
      this.setData({
        draggingIndex: index
      });
    }
  },
  onDragEnd(e) {
    this.setData({
      draggingIndex: -1
    });
  }
});

In the drag start event handler onDragStart, we get the index value of the current drag item and save it to the draggingIndex field in the data.

In the dragging process event handler onDragging, we remove the dragging item from its original position and insert it into the current dragging position. Finally, we save the modified list to the data and update the index value of the current drag item.

In the drag end event handler onDragEnd, we reset the draggingIndex field in the data to -1, indicating the end of the drag process.

The above is a complete code example to implement the drag and drop sorting function of WeChat applet. By running this code, we can implement the drag-and-drop sorting function in the mini program. Hope this code example is helpful! If you have any questions, feel free to ask!

The above is the detailed content of Use WeChat applet to implement drag-and-drop sorting function. For more information, please follow other related articles on the PHP Chinese website!