微信小程序之拖拽排序的实现代码

www.bjxdzj.com 更新:2017-02-28 编辑:kepeer 来源:转载
本文详细介绍了微信小程序中实现拖拽排序的代码,在微信小程序开发中非常实用,有需要的同学可以拿去用。

mg电子:一所学校如此公然地鼓励学生充当偷拍者、告密者,这已近乎于是一种人格羞辱。

index.wxml

 

 代码如下 复制代码

<!--index.wxml-->

<viewclass="container">

 <viewbindtap="box"class="box">

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

//获取应用实例

varapp = getApp();

varx,y,x1,y1,x2,y2,index,currindex,n,yy;

vararr1 = [{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){

  vararr = [];

  for(vari=0; i<this.data.content.length; i++){

  arr.push(this.data.content[i]);

  }

  varnx =this.data.content.length;

  n=1;

  for(vark=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(varm=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:200rpx0;

 box-sizing: border-box;

}

.box{width:300px;position:relative}

.main{width:90%;height:50px;background:#eee;border:1pxsolid#ccc;margin:2pxauto;text-align:center;line-height:50px;}

.mainmove{position:absolute; opacity:0.7}

.maind{background:#fff;border:1pxdashed#efefef;}

.mainend{position:static; opacity:1;}

 

没有了123 下一篇
上一页:没有了      下一页:微信小程序如何将图片一键生成PPT?

相关内容

    暂无与此文章相关内容

合作: 博狗博彩 新葡京官网 mg电子