微信小程序—拖拽排序

原文地址 微信小程序之拖拽排序（代码分享）

原文地址 微信小程序之拖拽排序（代码分享）

其他拖拽开源项目

---

以下是源码奉上：

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? 'mainmove':'mainend'}}" 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;}