巢湖微信小程序_vue完成移动端拖动排序

vue实现移动端拖动排序       这篇文章主要为大家详细介绍了vue实现移动端拖动排序,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

本文实例为大家分享了vue实现移动端拖动排序的具体代码,供大家参考,具体内容如下

效果

代码:

 template 
 div 
 div id="columns" 
 div id="child"
 v-for="(option,index) in options"
 :key="index"
 {{option}}
 /div 
 !-- div id="test" @touchstart="down" @touchmove="move" @touchend="end"
 什么都没有
 /div -- 
 /div 
 /div 
 /template 

i.style.top = (i.offsetHeight * num) + 'px'; i.addEventListener('touchstart', this.down); i.addEventListener('touchmove', this.move); i.addEventListener('touchend', this.end); num ++; methods: { down(e) { e.preventDefault(); this.flags = true; var touch; if (e.touches) { touch = e.touches[0]; } else { touch = e; /*touch.clientX clientY 鼠标点击的位置与视图窗口的距离 * e.target.offsetLeft offsetTop 鼠标点击的div与父元 * 素的边框距离,父元素必须为定位样式,不然认为父元素为body * */ this.position.x = touch.clientX; this.position.y = touch.clientY; this.dx = e.target.offsetLeft; this.dy = e.target.offsetTop; move(e) { if (this.flags) { var touch; if (e.touches) { touch = e.touches[0]; } else { touch = e; this.nx = touch.clientX - this.position.x; this.ny = touch.clientY - this.position.y;//移动的距离 this.xPum = this.dx + this.nx; this.yPum = this.dy + this.ny; e.target.style.left = this.xPum + 'px'; e.target.style.top = this.yPum + 'px'; end(e) { //处理边界问题 let right= e.target.offsetLeft + e.target.offsetWidth; let bottom = e.target.offsetTop + e.target.offsetHeight; if(e.target.offsetLeft = 0 || right = e.target.offsetParent.offsetWidth){ e.target.style.left = 0 + 'px'; if(e.target.offsetTop = 0 || bottom = e.target.offsetParent.offsetHeight){ e.target.style.top = 0 + 'px'; this.dataTransfer(e); this.flags = false; dataTransfer(e){ let eleTop = e.target.offsetTop + Math.round(e.target.offsetHeight / 2);//找到当前元素的中间位置 let arr = Array.from(this.columns);//将nodelist转为array let index = arr.indexOf(e.target);//找到当前元素下标 for(let i in arr){ //如果当前元素进入另一个元素的位置,将他们的值互换,位置还原 if(eleTop arr[i].offsetTop eleTop (arr[i].offsetTop + arr[i].offsetHeight)){ //值互换,位置还原(保证数组的序列数据不变) let temp = arr[index].innerText; arr[index].innerText = arr[i].innerText; arr[i].innerText = temp; let num = 0; for (let i of this.columns) { i.style.top = (i.offsetHeight * num) + 'px'; num ++; /script

相关阅读