draggable布局 vue_vuedraggable+element ui实现页面控件拖拽排序效果

项目要实现一些控件的拖拽排序。从而找到了这款vuedraggable控件，供大家参考，具体内容如下

如上图要实现这些控件的拖拽排序

这是拖拽后

由于公司网络的原因，项目没有使用npm，都是使用的引入的js

布局代码

标签draggable放在你要拖拽的组件的最外层。

相关的处理代码

getdata(evt) {

console.log(evt.draggedcontext.filterkey)

//这里evt.draggedcontext后续的内容根据具体的定义变量而定

},

datadragend(evt) {

console.log('拖动前的索引 :' + evt.oldindex)

console.log('拖动后的索引 :' + evt.newindex);

let filters = this.filters;

for(let a=0;a

filters[a].index = a;

}

vm.report.filter = filters;

}

这里是因为我们需要将每个的顺序记录下来所以有业务代码。

每次移动后，可以通过v-model获取所有的控件，他们的顺序是当前排好的顺序，再进行index顺序记录。

evt为object，他的内容较多。

draggedcontext: 被拖拽元素的上下文

index:拖拽元素的指针

element: 拖拽数据本身

futureindex: 拖动后的index

element如图：

这是filters定义的数据本身也就是v-model内容。

relatedcontext: 拖入区域的上下文

index: 目标元素的index

element:目标数据本身

list: 拖入的列表

component:目标组件

dragged:被拖拽元素的指向

大概就这些，功能较简单，但满足了要求就行。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持萬仟网。

希望与广大网友互动？？

点此进行留言吧！