项目要实现一些控件的拖拽排序。从而找到了这款vuedraggable控件,供大家参考,具体内容如下
如上图要实现这些控件的拖拽排序
这是拖拽后
由于公司网络的原因,项目没有使用npm,都是使用的引入的js
& lt;脚本type=" text/javascript " src=" https://www.yisu.com/zixun/lib/sortable/Sortable.min.js "祝辞& lt;/script>
& lt;脚本type=" text/javascript " src=" https://www.yisu.com/zixun/lib/vuedraggable/vuedraggable.min.js "祝辞& lt;/script>
布局代码
& lt; el-form:内联=" true "比;
& lt;可拖动的v模型="过滤器"可拖动=" true ":移动=癵etdata @update”=癲atadragEnd”比;
& lt; transition-group>
& lt; el-col:跨度=" 8 " v=肮似鞴恕?关键="过滤器。祝辞filterKey”;
& lt; el-form-item: label=" filter.name”比;
& lt; el-input v模型="过滤器。displayName "占位符="请输入设置属性" @focus=" openFilterDialog(过滤器)“祝辞& lt;/el-input>
& lt;/el-form-item>
& lt;/el-col>
& lt;/transition-group>
& lt;/draggable>
& lt; fitlerdialog v-bind:视觉=dialogObjectVisible v-bind: avtivefilter=avtivefilter v: on-filter-data-change=皁nFilterDataChange”v: filterdialogcancle=癶andleDialogObjectcancle”v: filterdialogclose=癶andleDialogObjectClose祝辞& lt;/fitlerdialog>
& lt;/el-form>
之前
标签拖放在你要拖拽的组件的最外层。
相关的处理代码
getdata (evt) {
console.log (evt.draggedContext.filterKey)//这里evt.draggedContext后续的内容根据具体的定义变量而定
},
datadragEnd (evt) {
控制台。日志(“拖动前的索引:“+ evt.oldIndex)
控制台。日志(“拖动后的索引:“+ evt.newIndex);
让过滤器=this.filters;
(让=0;a< filters.length; + +) {
过滤器(一个)。指数=;
}
vm.report。过滤器=过滤器;
}
这里是因为我们需要将每个的顺序记录下来所以有业务代码。
每次移动后,可以通过v模型获取所有的控件,他们的顺序是当前排好的顺序,再进行索引顺序记录。
evt为对象,他的内容较多。
draggedContext:被拖拽元素的上下文
指数:拖拽元素的指针
元素:拖拽数据本身
futureIndex:拖动后的指数
元素如图:
这是过滤器定义的数据本身也就是v模型内容。
relatedContext:拖入区域的上下文
指数:目标元素的指数
元素:目标数据本身
列表:拖入的列表
组件:目标组件
拖:被拖拽元素的指向
大概就这些,功能较简单,但满足了要求就行。
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。
