Utilisez l'applet WeChat pour implémenter la fonction de tri par glisser-déposer

Utilisez l'applet WeChat pour implémenter la fonction de tri par glisser-déposer. Exemple de code

Quand j'ai commencé à apprendre l'applet WeChat, j'ai toujours pensé que la mise en œuvre de la fonction de tri par glisser-déposer était très difficile. Cependant, en fouillant dans la documentation officielle et en essayant différentes approches, j'ai finalement réussi à implémenter cette fonctionnalité. Dans cet article, je partagerai des exemples de code spécifiques qui implémentent la fonctionnalité de tri par glisser-déposer.

Tout d’abord, créez une liste de tous les éléments triables dans un fichier wxml. Par exemple :

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

Dans le fichier de style wxss, nous devons ajouter des styles aux éléments triables pour les rendre déplaçables. Par exemple :

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

Dans le fichier js correspondant, nous devons définir certaines fonctions de gestion d'événements pour implémenter le tri par glisser-déposer. Tout d'abord, nous devons définir une liste triée d'éléments et une valeur d'index draggingIndex dans le champ de données de la page :

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

Ensuite, nous devons implémenter des gestionnaires d'événements pour le début, le processus de glisser et la fin du glisser ：

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

Dans le gestionnaire d'événements drag start onDragStart, nous obtenons la valeur d'index de l'élément de glissement actuel et l'enregistrons dans le champ draggingIndex dans les données.

Dans le gestionnaire d'événements du processus de glisser onDragging, nous supprimons l'élément de glisser de sa position d'origine et l'insérons dans la position de glisser actuelle. Enfin, nous enregistrons la liste modifiée dans les données et mettons à jour la valeur d'index de l'élément de glissement actuel.

Dans le gestionnaire d'événements de fin de glisser onDragEnd, nous réinitialisons le champ draggingIndex dans les données à -1, indiquant la fin du processus de glisser.

Ce qui précède est l'exemple de code complet pour implémenter la fonction de tri par glisser-déposer de l'applet WeChat. En exécutant ce code, nous pouvons implémenter la fonction de tri par glisser-déposer dans le mini programme. J'espère que cet exemple de code vous sera utile ! Si vous avez des questions, n'hésitez pas à les poser !

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!