介绍 & lt; template>
& lt; div类=皌est_wrapper"@dragover=癲ragover(事件),在
& lt;转变组类=皌ransition-wrapper"name=皊ort"比;
& lt; div)=癲ataList"(项);:关键=& # 39;item.id& # 39;类=皊ort-item"
:可拖动的=皌rue"
@dragstart=癲ragstart(项目)“;
@dragenter=癲ragenter(项目,事件美元)“;
@dragend=巴隙崾?项目,事件美元)“;
@dragover=癲ragover(事件),
比;
{{项目。标签}}
& lt;/div>
& lt;/transition-group>
& lt;/div>
& lt;/template>
& lt;脚本lang=皌s"祝辞
进口{Vue、组件、道具、看}从“vue-property-decorator";
从& # 39;进口{addWebsite} @/api # 39;
@ component ({
组件:{}
}）
出口的默认类测试扩展Vue {
oldData:任何=零;//开始排序时按住的旧数据
newData:任何=零;//拖拽过程的数据//列表数据
dataList:任何=(
{id: 1、标签:& # 39;测试一号& # 39;},
{id: 2、标签:& # 39;测试二号& # 39;},
{id: 3、标签:& # 39;测试三号& # 39;},
{id: 4、标签:& # 39;测试四号& # 39;},
];
dragstart(价值:有){
这一点。oldData=https://www.yisu.com/zixun/value
}//记录移动过程中信息
dragenter(价值:任何e:任何){
这一点。newData=值
e.preventDefault ()
}//拖拽最终操作
拖动结束(价值:任何e:任何){
如果这一点。oldData !==this.newData) {
让oldIndex=this.dataList.indexOf (this.oldData)
让newIndex=this.dataList.indexOf (this.newData)
让newItems=[…this.dataList]//删除老的节点
newItems。拼接(oldIndex, 1)//在列表中目标位置增加新的节点
newItems。拼接(newIndex 0 this.oldData)
这一点。dataList=[…newItems]
}
}//拖动事件(主要是为了拖动时鼠标光标不变为禁止)
dragover (e:有){
e.preventDefault ()
}
}；
这期内容当中小编将会给大家带来有关使用vue实现列表拖拽排序功能,文章内容丰富且以专业的角度为大家分析和叙述,阅读完这篇文章希望大家可以有所收获。
<强>首先,我们先了解一下js原生拖动事件:
在拖动目标上触发事件,(源元素):
- <李> ondragstart ——用户开始拖动元素时触发李 <李> ondrag -元素正在拖动时触发李 <李> ondragend -用户完成元素拖动后触发
释放目标时触发的事件:
- <李> ondragenter ——当被鼠标拖动的对象进入其容器范围内时触发此事件 <李> ondragover ——当某被拖动的对象在另一对象容器范围内拖动时触发此事件 <李> ondragleave ——当被鼠标拖动的对象离开其容器范围内时触发此事件 <李> ondrop -在一个拖动过程中,释放鼠标键时触发此事件
李,
基于js的原生拖拽事件,本次实现的拖拽排序的原理大概是:鼠标按住列表某一项开始拖动时触发ondragstart事件,将该拖动项用变量记录下来,
接着拖拽过程中,该拖动项经过列表其他项时,触发ondragenter事件,同样记录该拖动项最后经过的列表其他项的数据,最后在ondragend事件中
将数组列表删掉一开始ondragstart事件记录的拖动项,并将删掉的数据插入ondragenter事件最后记录的位置,完成拖动排序。
<强>具体代码如下:
<强>另外
为了实现拖动的动画效果,这里用到了过度小组组件,如上面代码显示,将过度小组组件的属性名称设为“类# 39;;并添加以下代码;
.sort-move {
过渡:变换0.3 s;
} ,,,,注意:为了让过渡有效果出现,v代表渲染的数据列表必须有关键属性,且该关键属性不可设为指数;,
<强>最终效果如下:
上述就是小编为大家分享的使用vue实现列表拖拽排序功能了,如果刚好有类似的疑惑,不妨参照上述分析进行理解。如果想知道更多相关知识,欢迎关注行业资讯频道。
