WeChat 애플릿을 사용하여 드래그 앤 드롭 정렬 기능 구현

WeChat 애플릿을 사용하여 드래그 앤 드롭 정렬 기능 구현 샘플 코드

처음 WeChat 애플릿을 배우기 시작했을 때 항상 드래그 앤 드롭 정렬 기능을 구현하는 것이 매우 어렵다고 생각했습니다. 그러나 공식 문서를 조사하고 다양한 접근 방식을 시도한 끝에 마침내 이 기능을 구현하는 데 성공했습니다. 이 기사에서는 드래그 앤 드롭 정렬 기능을 구현하는 특정 코드 예제를 공유하겠습니다.

먼저, 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 파일에서 드래그 앤 드롭 정렬을 구현하려면 일부 이벤트 처리 함수를 정의해야 합니다. 먼저 페이지의 데이터 필드에 정렬된 항목 목록과 index 값 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
    });
  }
});

In the 드래그 시작 이벤트 핸들러 onDragStart에서 현재 드래그 항목의 인덱스 값을 가져와 데이터의 draggingIndex 필드에 저장합니다.

드래깅 프로세스 이벤트 핸들러 onDragging에서 드래그 항목을 원래 위치에서 제거하고 현재 드래그 위치에 삽입합니다. 마지막으로 수정된 목록을 데이터에 저장하고 현재 드래그 항목의 인덱스 값을 업데이트합니다.

드래그 종료 이벤트 핸들러 onDragEnd에서 데이터의 draggingIndex 필드를 -1로 재설정하여 드래그 프로세스의 끝을 나타냅니다.

위는 WeChat 애플릿의 드래그 앤 드롭 정렬 기능을 구현하는 완전한 코드 예제입니다. 이 코드를 실행하면 미니 프로그램에서 드래그 앤 드롭 정렬 기능을 구현할 수 있습니다. 이 코드 예제가 도움이 되기를 바랍니다! 궁금한 점이 있으면 언제든지 문의하세요!

위 내용은 WeChat 애플릿을 사용하여 드래그 앤 드롭 정렬 기능 구현의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!