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


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 相关文章推荐
Packer 3.0 JS压缩及混淆工具 下载
May 03 Javascript
jquery1.5.1中根据元素ID获取元素对象的代码
Apr 02 Javascript
jQuery的控件及事件(输入控件及回车事件)使用示例
Jul 25 Javascript
jquery select 设置默认选中的示例代码
Feb 07 Javascript
php+js实现倒计时功能
Jun 02 Javascript
CSS+JS实现点击文字弹出定时自动关闭DIV层菜单的方法
May 12 Javascript
Bootstrap框架结合jQuery仿百度换肤功能实例解析
Sep 17 Javascript
JavaScript 继承详解(六)
Oct 11 Javascript
详解JavaScript中return的用法
May 08 Javascript
读懂CommonJS的模块加载
Apr 19 Javascript
在antd4.0中Form使用initialValue操作
Nov 02 Javascript
js实现简单图片拖拽效果
Feb 22 Javascript
微信小程序 利用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
又拍云异步上传实例教程详解
2016/04/19 PHP
兼容ie、firefox的图片自动缩放的css跟js代码分享
2013/08/12 Javascript
jQuery及JS实现循环中暂停的方法
2015/02/02 Javascript
用NodeJS实现批量查询地理位置的经纬度接口
2016/08/16 NodeJs
bootstrap Validator 模态框、jsp、表单验证 Ajax提交功能
2017/02/17 Javascript
Angular企业级开发——MVC之控制器详解
2017/02/20 Javascript
JS模拟超市简易收银台小程序代码解析
2017/08/18 Javascript
在vue项目中引入highcharts图表的方法(详解)
2018/03/05 Javascript
JS实现自定义弹窗功能
2018/08/08 Javascript
vue项目使用axios发送请求让ajax请求头部携带cookie的方法
2018/09/26 Javascript
Angular resolve基础用法详解
2018/10/03 Javascript
JavaScript实现多张图片放大镜效果示例【不限定图片尺寸,rem单位】
2019/05/14 Javascript
javascript实现点亮灯泡特效示例
2019/10/15 Javascript
Node.js 深度调试方法解析
2020/07/28 Javascript
Python中请使用isinstance()判断变量类型
2014/08/25 Python
Python 专题二 条件语句和循环语句的基础知识
2017/03/19 Python
Php多进程实现代码
2018/05/07 Python
使用numba对Python运算加速的方法
2018/10/15 Python
pygame用blit()实现动画效果的示例代码
2020/05/28 Python
Python爬虫入门教程01之爬取豆瓣Top电影
2021/01/24 Python
解决img标签上下出现间隙的方法
2016/12/14 HTML / CSS
世界上最大的餐具公司:Oneida
2016/12/17 全球购物
介绍下java.util.Arrays类
2012/10/16 面试题
工商管理实习生自我鉴定范文
2013/12/18 职场文书
优秀团员个人事迹材料
2014/01/29 职场文书
在职党员进社区活动总结
2014/07/05 职场文书
妇女工作先进事迹
2014/08/17 职场文书
公司感恩节活动策划书
2014/10/11 职场文书
2014年语文教师工作总结
2014/12/18 职场文书
人事专员岗位职责
2015/02/03 职场文书
党员廉洁自律个人总结
2015/02/13 职场文书
职业规划从高考志愿专业选择开始
2019/08/08 职场文书
Python批量将csv文件转化成xml文件的实例
2021/05/10 Python
mysql下的max_allowed_packet参数设置详解
2022/02/12 MySQL
《王者天下》第4季首话新剧照 4月9日正式开播
2022/04/07 日漫
java获取一个文本文件的编码(格式)信息
2022/09/23 Java/Android