template:
<div class="drag-title">拖拽可调整顺序</div>
<ul class="drag-list">
<li class="drag-item">{{item.txt}}</li>
</ul>
script:
export default {
data() {
return {
dragList:null
}
},
created() {
this.dragList = [
{
isDrag: false,
txt: '列表1',
isShow: false
}
...
]},
}
假设我们将元素从位置1拖至位置3，本质上是数组的顺序发生了改变。这就有必要提一下Vue的最大特性：数据驱动。
所谓的数据驱动就是当数据发生变化时，通过修改数据状态，使用户界面发生相应的改变，开发者不需要手动的去修改DOM。
Vue的数据驱动是通过MVVM这种框架来实现的，MVVM框架主要包含3个部分:Model、View、Viewmodel。
– Model：数据部分；
– View：视图部分；
– Viewmodel：连接视图与数据的中间件。
顺着这个思路走下去，我们知道：
– oldIndex：元素在数组中的初始索引index；
– elHeight：单个元素块的高；
– currTop = clientY – elTop：元素在拖动过程中距离可视区上侧距离；
– currTop – initTop > 0：得知元素是向上拖拽；
– currTop – initTop < 0：得知元素是向下拖拽。
我们以向下拖拽来说：
– 首先，我们要在拖拽结束事件touchend中判断元素从拖动开始到拖动结束时拖动的距离。若小于某个设定的值，则什么也不做；
– 然后，在touchmove事件中判断，若(currTop – initTop) % elHeight>= elHeight/2成立，即当元素拖至另一个元素块等于或超过1/2的位置时，即可将元素插入到最新的位置为newIndex = (currTop – initTop) / elHeight + oldIndex。
– 最后，若手指离开元素，那么我们在touchend事件中，通过this.dragList.splice(oldIndex, 1)，this.dragList.splice(newIndex, 0, item)重新调整数组顺序。页面会根据最新的dragList渲染列表。
写到这里，我们俨然已经用Vue实现了移动端的拖拽功能。但是拖拽体验并不好，接下来，我们对它进行优化。
优化点：我们希望，在元素即将可能落到的位置，提前留出一个可以放得下元素的区域，让用户更好的感知拖拽的灵活性。
方案：（方案已被验证是可行的）将li的结构做一下修改，代码如下：
<ul>
<li class="drag-item">
<div class="leave-block"></div>
// 向上拖拽时留空
<div class="">{{item.txt}}</div>
<div class="leave-block"></div>
// 向下拖拽时留空</li>
</ul>•拖拽开始：将元素的定位方式由static设置为absolute，z-index设置为一个较大的值，防止元素二次拖拽无效；
•拖拽过程中：将元素即将落入新位置的那个li下div的item.isShow设置为true，其他li下div的item.isShow均设置为false;
