Maison  >  Article  >  Applet WeChat  >  Exemple de code pour le tri par glisser-déposer dans le mini-programme WeChat

Exemple de code pour le tri par glisser-déposer dans le mini-programme WeChat

高洛峰
高洛峰original
2017-03-13 10:53:014020parcourir

Cet article partage principalement l'exemple de code pour le tri par glisser-déposer des mini-programmes WeChat. Il a une certaine valeur de référence, jetons-y un coup d'œil avec l'éditeur ci-dessous

index.wxml

<!--index.wxml-->
<view class="container">
 <view bindtap="box" class="box" >
 <view disable-scroll="true" wx:for="{{content}}" bindtouchmove="move" bindtouchstart="movestart" bindtouchend="moveend" data-index="{{item.id}}" data-main="{{mainx}}" class="main {{mainx == item.id? &#39;mainmove&#39;:&#39;mainend&#39;}}" style="left:{{start.x}}px; top:{{start.y}}px">{{item.content}}</view>
 </view>
</view>

index.js

//index.js
//获取应用实例
var app = getApp();
var x,y,x1,y1,x2,y2,index,currindex,n,yy;
var arr1 = [{content:11,id:1},{content:22,id:2},{content:33,id:3},{content:44,id:4},{content:55,id:5}];
Page({
 data: {
 mainx:0,
 content:[{content:11,id:1},{content:22,id:2},{content:33,id:3},{content:44,id:4},{content:55,id:5}],
 start:{x:0,y:0}
 },
 movestart:function(e){
 currindex = e.target.dataset.index;
  x = e.touches[0].clientX;
  y = e.touches[0].clientY;
  x1 = e.currentTarget.offsetLeft;
  y1 = e.currentTarget.offsetTop;
 },
 move:function(e){
 yy = e.currentTarget.offsetTop;
 x2 = e.touches[0].clientX-x+x1;
 y2 = e.touches[0].clientY-y+y1;
 this.setData({
  mainx:currindex,
  opacity:0.7,
  start:{x:x2,y:y2}
 })
 },
 moveend:function(){
 if(y2 != 0){
  var arr = [];
  for(var i=0; i<this.data.content.length; i++){
  arr.push(this.data.content[i]);
  }
  var nx = this.data.content.length;
  n=1;
  for(var k=2; k<nx; k++){
  if(y2>(52*(k-1)+k*2-26)){
   n=k;
  }
  }
  if(y2>(52*(nx-1)+nx*2-26)){
  n = nx;
  }
  console.log(arr);
  console.log(arr1)
  arr.splice((currindex-1),1);
  arr.splice((n-1),0,arr1[currindex-1]);
  arr1 = [];
  for(var m=0; m<this.data.content.length; m++){
  console.log(arr[m]);
  arr[m].id = m+1;
  arr1.push(arr[m]);
  }
  // console.log(arr1);
  this.setData({
  mainx:"",
  content:arr,
  opacity:1
  })
 }
 }
})

index.wxss

.container {
 height: 100%;
 display: flex;
 flex-direction: column;
 align-items: center;
 justify-content: space-between;
 padding: 200rpx 0;
 box-sizing: border-box;
} 
.box{width:300px; position: relative}
.main{width: 90%; height:50px; background: #eee; border: 1px solid #ccc; margin:2px auto; text-align: center; line-height: 50px;}
.mainmove{position: absolute; opacity: 0.7}
.maind{background: #fff; border:1px dashed #efefef;}
.mainend{position: static; opacity: 1;}

Ce qui précède est l'intégralité du contenu de cet article. J'espère que le contenu de cet article pourra apporter de l'aide aux études ou au travail de chacun, j'espère également. pour prendre en charge PHP chinois net!

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!

Déclaration:
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn