<ul> <li> <div></div> // 向上拖拽时留空 <div>{{item.txt}}</div> <div></div> // 向下拖拽时留空</li> </ul>
•拖拽开始：将元素的定位方式由static设置为absolute，z-index设置为一个较大的值，防止元素二次拖拽无效；
•拖拽过程中：将元素即将落入新位置的那个li下div的item.isShow设置为true，其他li下div的item.isShow均设置为false;
•拖拽结束：将所有li下div的item.isShow 均设置为false，将元素定位方式由absolute设置为static。
贴一段伪代码：
touchStart(e){ // 获取元素距离视口顶部的初始距离 initTop = e.currentTarget.offsetTop; // 开始拖动时，获取鼠标距离视口顶部的距离 initClientY = e.touches[0].clientY; // 计算出接触点距离元素顶部的距离 elTop = e.touches[0].clientY - initTop; }, touchMove(index, item, e){ // 将拖拽结束时，给元素设置的static定位方式移除，防止元素二次拖拽无效 e.target.classList.remove('static'); // 给拖拽的元素设置绝对定位方式 e.target.classList.add('ab'); // 获取元素在拖拽过程中距离视口顶部距离 currTop = e.touches[0].clientY - elTop; // 元素在拖拽过程中距离视口顶部距离赋给元素 e.target.style.top = currTop ; // 获取元素初始位置 oldIndex = index; // 获取拖拽元素 currItem = item; // 若元素已经拖至区域外 if(e.touches[0].clientY > (this.dragList.length) * elHeight){ // 将元素距离上侧的距离设置为拖动区视图的高 currTop = (this.dragList.length) * elHeight; return; } // 向下拖拽 if(currTop > initTop ){ // 若拖拽到大于等于元素的一半时，即可将元素插入到最新的位置 if((currTop - initTop) % elHeight>= elHeight / 2){ // 计算出元素拖到的最新位置 newIndex = Math.round((currTop - initTop) / elHeight) + index; // 确保新元素的索引不能大于等于列表的长度 if(newIndex < this.dragList.length){ // 将所有列表留空处隐藏 for(var i = 0;i< this.dragList.length;i++){ this.dragList[i].isShow = false; } // 将元素即将拖到的新位置的留空展示 this.dragList[newIndex].isShow = true; } else { return; } } } // 向上拖拽，原理同上 if(currTop < initTop){ ... } }, touchEnd(e){ // 若拖动距离大于某个设定的值，则按照上述，执行相关代码 if(Math.abs(e.changedTouches[0].clientY - initClientY ) > customVal){ this.dragList.splice(oldIndex, 1); this.dragList.splice(newIndex, 0, currItem); for(var i = 0;i< this.dragList.length;i++){ this.dragList[i].isShow = false; this.dragList[i].isShowUp = false; } } e.target.classList.remove('ab'); e.target.classList.add('static'); }
优化后，如下图所示：
以上便是用Vue实现移动端拖拽组件的过程。我们知道，有些项目是需要在PC端用Vue实现此功能。这里简单提一下PC与移动端的区别如下：
•PC端可以使用的事件组有两种：第一种：H5新特性draggable，dragstart，drag，dragend；第二种：mousedown，mousemove，mouseup;
•PC端获取鼠标坐标是通过e.clientX，clientY，区别于移动端的e.touches[0].clientX，e.touches[0].clientY。
小结
本文从Vue拖拽组件开发为例，剖析Vue组件的结构、开发思路、Vue的数据驱动等，对Vue组件化的原理，进行了更深入的理解。 并将Vue实现拖拽的方案提供给大家学习研究。
P.S. 牢记一点，切勿在Vue中过多得操作DOM，要能深入理解Vue数据驱动的核心思想。
您可能感兴趣的文章: