vuedraggable元素ui实现了页面控件的拖拽和排序效果

项目需要实现一些控件的拖放排序。所以找到这个vuedraggable控件供大家参考，具体内容如下

如上图，要实现这些控件的拖放排序，这是在拖放之后

由于公司网络的原因，项目中不使用npm，而是使用js。

脚本类型=' text/JavaScript ' src=' http : lib/sortable/sortable . min . js '/script script类型=' text/JavaScript ' src=' http : lib/vue draggable/vue draggable . min . js '/脚本布局代码

el-form :inline='true '可拖动v-model='filters '可拖动=' true ' : move=' getdata ' @ update=' datadragEnd '转换组El-col : span=' 8 ' v-for=' filters in filters ' : key=' filter . filterkey ' style=' margin-top : 5px ' El-form-item : label=' filter . name ' El-input v-model=' filter。

相关处理代码

getdata(evt){ console . log(evt.draggedContext . filter key)//这里，evt . draggedcontext的后续内容取决于具体的定义变量}。DatadragEnd(evt) {console.log('拖动：' evt.oldIndex前的索引)console.log(拖动3360' evt.newindex后的索引)；让filters=this.filtersfor(设a=0；长度；a ){过滤器[a]。索引=a；} vm.report.filter=筛选器；}在这里，因为我们需要记录每个订单的订单，所以我们有业务代码。每次移动后，可以通过v-model得到所有控件，它们的顺序是当前排列的顺序，然后记录索引顺序。

Evt是对象，它有很多内容。

DraggedContext:被拖动元素的上下文

索引：拖动元素的指针元素：拖动数据本身到索引：拖动后的索引

元素如图所示：

这是过滤器定义的数据，也是v-model的内容。

相关上下文：拖动区域的上下文

索引：索引元素：目标数据本身列表：拖入列表组件：目标组件

拖动：被拖动元素的指向

差不多了。功能很简单，但前提是要满足要求。

以上就是本文的全部内容。希望对大家的学习有帮助，支持我们。