微信小程序之拖拽排序(代码分享)


Posted in Javascript onJanuary 21, 2017

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

以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,同时也希望多多支持三水点靠木!

Javascript 相关文章推荐
怎么让脚本或里面的函数在所有图片都载入完毕的时候执行
Oct 17 Javascript
新浪的图片新闻效果
Jan 13 Javascript
一个简单的网站访问JS计数器 刷新1次加1次访问
Sep 20 Javascript
js判断选择的时间是否大于今天的代码
Aug 20 Javascript
javascript 获取HTML DOM父、子、临近节点
Jun 16 Javascript
PHP+jQuery+Ajax实现多图片上传效果
Mar 14 Javascript
bootstrap多层模态框滚动条消失的问题
Jul 21 Javascript
微信小程序自定义底部弹出框
Nov 16 Javascript
react 兄弟组件如何调用对方的方法示例
Oct 23 Javascript
为vue项目自动设置请求状态的配置方法
Jun 09 Javascript
element中的$confirm的使用
Apr 26 Javascript
Vue页面渲染中key的应用实例教程
Jan 12 Vue.js
微信小程序 利用css实现遮罩效果实例详解
Jan 21 #Javascript
JavaScript数组去重的6个方法
Jan 21 #Javascript
微信小程序 scroll-view实现上拉加载与下拉刷新的实例
Jan 21 #Javascript
JS常用知识点整理
Jan 21 #Javascript
使用vue.js2.0 + ElementUI开发后台管理系统详细教程(一)
Jan 21 #Javascript
原生js实现可拖动的登录框效果
Jan 21 #Javascript
微信小程序 WebSocket详解及应用
Jan 21 #Javascript
You might like
浅析PHP关键词替换的类(避免重复替换,保留与还原原始链接)
2015/09/22 PHP
yii添删改查实例
2015/11/16 PHP
PHP文件操作之获取目录下文件与计算相对路径的方法
2016/01/08 PHP
laravel创建类似ThinPHP中functions.php的全局函数
2016/11/26 PHP
jQuery实现鼠标划过展示大图的方法
2015/03/09 Javascript
浅谈JavaScript中的Math.atan()方法的使用
2015/06/14 Javascript
JS控制表单提交的方法
2015/07/09 Javascript
jQuery实现点击后标记当前菜单位置(背景高亮菜单)效果
2015/08/22 Javascript
Bootstrap整体框架之CSS12栅格系统
2016/12/15 Javascript
Angular使用$http.jsonp发送跨站请求的方法
2017/03/16 Javascript
JavaScript实现打地鼠小游戏
2020/04/23 Javascript
angular.js实现购物车功能
2017/10/23 Javascript
vue中使用ueditor富文本编辑器
2018/02/08 Javascript
详解elementui之el-image-viewer(图片查看器)
2019/08/30 Javascript
浅谈layui使用模板引擎动态渲染元素要注意的问题
2019/09/14 Javascript
vue从后台渲染文章列表以及根据id跳转文章详情详解
2020/12/14 Vue.js
[02:29]完美世界高校联赛上海赛区回顾
2015/12/15 DOTA
Django框架中处理URLconf中特定的URL的方法
2015/07/20 Python
python3使用urllib模块制作网络爬虫
2016/04/08 Python
Python中elasticsearch插入和更新数据的实现方法
2018/04/01 Python
Python自定义函数实现求两个数最大公约数、最小公倍数示例
2018/05/21 Python
selenium+python截图不成功的解决方法
2019/01/30 Python
Django中使用Whoosh进行全文检索的方法
2019/03/31 Python
如何使用python爬虫爬取要登陆的网站
2019/07/12 Python
Python 迭代,for...in遍历,迭代原理与应用示例
2019/10/12 Python
Ralph Lauren法国官网:美国高品味时装品牌
2017/12/08 全球购物
波兰在线运动商店:YesSport
2020/07/23 全球购物
日本语毕业生自荐信
2014/02/01 职场文书
幼儿教师国培感言
2014/02/19 职场文书
司机职责范本
2014/03/08 职场文书
优秀团支部申报材料
2014/12/26 职场文书
质量保证书格式
2015/02/27 职场文书
《火烧云》教学反思
2016/02/23 职场文书
2016年春季趣味运动会开幕词
2016/03/04 职场文书
nginx网站服务如何配置防盗链(推荐)
2021/03/31 Servers
详解Python内置模块Collections
2022/03/22 Python