使用微信小程式實作拖曳排序功能

使用微信小程式實作拖曳排序功能範例程式碼

剛開始學習微信小程式時，我一直以為實作拖曳排序功能是很困難的事情。然而，透過深入研究官方文件和嘗試不同的方法，我終於成功地實現了這項功能。在本篇文章中，我將分享實作拖曳排序功能的具體程式碼範例。

首先，在 wxml 檔案中建立一個包含所有可排序項的清單。例如：

<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>

在樣式檔案 wxss 中，我們需要為可排序項目添加一些樣式，使其可以拖曳。例如：

.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;
}

在對應的 js 檔案中，我們需要定義一些事件處理函數來實作拖曳排序。首先，我們需要在頁面的data 欄位中定義一個排序清單items 和一個正在拖曳中的索引值draggingIndex：

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

接下來，我們需要實現拖曳開始、拖曳過程和拖曳結束的事件處理函數：

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
    });
  }
});

在拖曳開始事件處理函數onDragStart 中，我們取得目前拖曳項目的索引值，並將其儲存到資料中的draggingIndex 欄位。

在拖曳過程事件處理函數 onDragging 中，我們將拖曳項從原位置移除，並插入到目前拖曳位置。最後，我們將修改後的清單儲存到資料中，同時更新目前拖曳項目的索引值。

在拖曳結束事件處理函數 onDragEnd 中，我們將資料中的 draggingIndex 欄位重設為 -1，表示拖曳過程結束。

以上就是實作微信小程式拖曳排序功能的完整程式碼範例。透過運行這段程式碼，我們就可以在小程式中實作拖曳排序功能了。希望這個程式碼範例對大家有幫助！如果有任何問題，歡迎隨時提問！

以上是使用微信小程式實作拖曳排序功能的詳細內容。更多資訊請關注PHP中文網其他相關文章！