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


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 相关文章推荐
JavaScript TO HTML 转换
Jun 26 Javascript
jquery事件与函数的使用介绍
Sep 29 Javascript
javaScript实现浮点数转十六进制字符
Oct 29 Javascript
为jquery的ajaxfileupload增加附加参数的方法
Mar 04 Javascript
JS+CSS实现简易实用的滑动门菜单效果
Sep 18 Javascript
js传值后台中文出现乱码的解决方法
Jun 30 Javascript
vue2组件实现懒加载浅析
Mar 29 Javascript
node跨域请求方法小结
Aug 25 Javascript
vue组件详解之使用slot分发内容
Apr 09 Javascript
Vue项目全局配置微信分享思路详解
May 04 Javascript
react用Redux中央仓库实现一个todolist
Sep 29 Javascript
JavaScript设计模式之门面模式原理与实现方法分析
Mar 09 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
php 仿Comsenz安装效果代码打包提供下载
2010/05/09 PHP
为Plesk PHP7启用Oracle OCI8扩展方法总结
2019/03/29 PHP
tp5 sum某个字段相加得到总数的例子
2019/10/18 PHP
js jquery做的图片连续滚动代码
2008/01/06 Javascript
js控制框架刷新
2008/08/01 Javascript
用户注册常用javascript代码
2009/08/29 Javascript
JS连连看源码完美注释版(推荐)
2013/12/09 Javascript
js购物车实现思路及代码(个人感觉不错)
2013/12/23 Javascript
jQuery学习笔记之 Ajax操作篇(一) - 数据加载
2014/06/23 Javascript
浅析javascript的间隔调用和延时调用
2014/11/12 Javascript
使用JavaScript 实现的人脸检测
2015/03/24 Javascript
自动化测试读写64位操作系统的注册表
2016/08/15 Javascript
jquery实现拖动效果(代码分享)
2017/01/25 Javascript
Bootstrap 表单验证formValidation 实现表单动态验证功能
2017/05/17 Javascript
原生JS实现的双色球功能示例
2018/02/02 Javascript
基于JavaScript实现幸运抽奖页面
2020/07/05 Javascript
Vue 与 Vuex 的第一次接触遇到的坑
2018/08/16 Javascript
angular2/ionic2 实现搜索结果中的搜索关键字高亮的示例
2018/08/17 Javascript
浅谈关于JS下大批量异步任务按顺序执行解决方案一点思考
2019/01/08 Javascript
PostgreSQL Node.js实现函数计算方法示例
2019/02/12 Javascript
使用Vue.js 和Chart.js制作绚丽多彩的图表
2019/06/15 Javascript
js事件触发操作实例分析
2019/06/21 Javascript
vue 关闭浏览器窗口的时候,清空localStorage的数据示例
2019/11/06 Javascript
Vue 3.0中jsx语法的使用
2020/11/13 Javascript
[02:44]DOTA2英雄基础教程 克林克兹
2014/01/15 DOTA
详解python里使用正则表达式的分组命名方式
2017/10/24 Python
详谈套接字中SO_REUSEPORT和SO_REUSEADDR的区别
2018/04/28 Python
python2和python3实现在图片上加汉字的方法
2019/08/22 Python
Python实现AI换脸功能
2020/04/10 Python
keras 回调函数Callbacks 断点ModelCheckpoint教程
2020/06/18 Python
HTML5 embed 标签使用方法介绍
2013/08/13 HTML / CSS
固特异美国在线轮胎店:Goodyear Tire
2019/02/23 全球购物
2014年商场工作总结
2014/11/22 职场文书
狮子林导游词
2015/02/03 职场文书
诚信考试主题班会
2015/08/17 职场文书
MySQL 用 limit 为什么会影响性能
2021/09/15 MySQL