vuedraggable,vue-dragable
本文主要介绍Vue的交换位置。细节可拖动。本文中的示例代码非常详细，具有一定的参考价值。感兴趣的朋友可以参考一下。
Vue。Draggable实现交换位置，供大家参考。具体情况如下
前言
最近的一个项目触及了组件Vue。然而，我们的需求与Vue支持的需求有些不同。该拖动组件属于插入模式。但是，如果被拖动的元素是备用元素(由几个元素分隔)，那么被拖动的元素将占据被拖动元素的位置，后续元素的位置将一步一步减少。
如下图：
C被拖到了A的位置，也就是说C被插在了A的前面，于是就变成了cab。
需求
实现交换而不是插入，上图就会变成(cba)
实现方式
不可能阻止它被插入，所以我们只能在它被插入后对我们想要的元素进行操作。例如，获取头部和尾部索引。交换它们在数组中的位置。需要注意的是，因为拖动时数组中元素的位置发生了变化，所以我们需要在拖动前复制一个与原数组相同的数组。
实现步骤
1.选择适合自己的方法。您需要能够获得开始索引和结束索引。
结束、排序和更新都可用。
2.深层拷贝
copyList(){
this . copy list=this . list . slice(0)
}
3.按索引操作copyList数组位置。
const item=this . copy list[old index]
this.copyList.splice(oldIndex，1，this . copy list[new index])；
this.copyList.splice(newIndex，1，item)；
4.将拷贝列表分配给列表，并在最后获得拷贝列表的新副本。
this.list=this.copyList
this . copy list=this . list . slice(0)；
所有代码
从“@/vuedragable”导入draggable
设id=1；
导出默认值{
名称：“简单”，
显示：“简单”，
订单：0，
组件：{
可拖动，
},
data() {
返回{
启用：真，
列表：[{ name: a }，{ name: b }，{ name: c }]，
拖：假，
指数：0，
复制列表：[]，
};
},
计算值：{
draggingInfo() {
把这个还回去。拖着？在拖动“:”时；
},
},
已创建(){
this . copy list=this . list . slice(0)；
},
方法：{
add: function () {
this.list.push({ name: Juan id，id:id })；
},
替换：函数(){
this.list=[{ name: Edgard ，id:id }]；
},
end({ oldIndex，newIndex }) {
const item=this . copy list[old index]；
this.copyList.splice(oldIndex，1，this . copy list[new index])；
this.copyList.splice(newIndex，1，item)；
this . list=this . copy list；
this . copy list=this . list . slice(0)；
},
}
};
可拖动的
:list=list
:disabled=！已启用
class=list-group
鬼-class=鬼
:move=checkMove
@end=end
@sort=sort
@update=update
@start=start
div class= list-group-item v-for= list中的元素:key= element . name { element . name } }/div
/可拖动
这就是本文的全部内容。希望对大家的学习有帮助，支持我们。
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。