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


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 相关文章推荐
prototype与jquery下Ajax实现的差别
Sep 13 Javascript
jQuery入门知识简介
Mar 04 Javascript
jQuery页面图片伴随滚动条逐渐显示的小例子
Mar 21 Javascript
JS window对象的top、parent、opener含义介绍
Dec 03 Javascript
ie浏览器使用js导出网页到excel并打印
Mar 11 Javascript
JavaScript轻松创建级联函数的方法示例
Feb 10 Javascript
JS实现验证码倒计时的注册页面
Jan 02 Javascript
vue实现点击关注后及时更新列表功能
Jun 26 Javascript
Laravel admin实现消息提醒、播放音频功能
Jul 10 Javascript
简单使用webpack打包文件的实现
Oct 29 Javascript
微信小程序接入腾讯云验证码的方法步骤
Jan 07 Javascript
浅谈JS for循环中使用break和continue的区别
Jul 21 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 SQLite类
2009/05/07 PHP
用穿越火线快速入门php面向对象
2012/02/22 PHP
php+mysqli数据库连接的两种方式
2015/01/28 PHP
php通过function_exists检测函数是否存在的方法
2015/03/18 PHP
wordpress安装过程中遇到中文乱码的处理方法
2015/04/21 PHP
PHP Imagick完美实现图片裁切、生成缩略图、添加水印
2016/02/22 PHP
PHP的消息通信机制测试实例
2016/11/10 PHP
php插件Xajax使用方法详解
2017/08/31 PHP
基于Laravel实现的用户动态模块开发
2017/09/21 PHP
php生成复杂验证码(倾斜,正弦干扰线,黏贴,旋转)
2018/03/12 PHP
S2SH整合JQuery+Ajax实现登录验证功能实现代码
2013/01/30 Javascript
JavaScript动态操作表格实例(添加,删除行,列及单元格)
2013/11/25 Javascript
JavaScript实现存储HTML字符串示例
2014/04/21 Javascript
JavaScript中具名函数的多种调用方式总结
2014/11/08 Javascript
JavaScript中实现Map的示例代码
2015/09/09 Javascript
jquery ajax双击div可直接修改div中的内容
2016/03/04 Javascript
vue2 自定义动态组件所遇到的问题
2017/06/08 Javascript
js的函数的按值传递参数(实例讲解)
2017/11/16 Javascript
VUE2.0中Jsonp的使用方法
2018/05/22 Javascript
jQuery zTree如何改变指定节点文本样式
2020/10/16 jQuery
[02:36]DOTA2英雄基础教程 一击致命幻影刺客
2013/12/06 DOTA
[01:06:30]DOTA2-DPC中国联赛定级赛 Phoenix vs DLG BO3第二场 1月9日
2021/03/11 DOTA
python编程-将Python程序转化为可执行程序[整理]
2007/04/09 Python
深入理解Python装饰器
2016/07/27 Python
更改Ubuntu默认python版本的两种方法python-&gt; Anaconda
2016/12/18 Python
Python 内置函数memoryview(obj)的具体用法
2017/11/23 Python
Python使用win32 COM实现Excel的写入与保存功能示例
2018/05/03 Python
从DataFrame中提取出Series或DataFrame对象的方法
2018/11/10 Python
python实现梯度下降法
2020/03/24 Python
win7上tensorflow2.2.0安装成功 引用DLL load failed时找不到指定模块 tensorflow has no attribute xxx 解决方法
2020/05/20 Python
利用CSS3实现自定义滚动条代码分享
2016/08/18 HTML / CSS
如何避免常见的6种HTML5错误用法
2017/11/06 HTML / CSS
世界上最受欢迎的钓鱼诱饵:Rapala
2019/05/02 全球购物
会计岗位描述
2014/02/22 职场文书
经典而简洁的婚礼主持词
2014/03/13 职场文书
Linux系统下MySQL配置主从分离的步骤
2022/03/21 MySQL