项目要实现一些控件的拖拽排序。从而找到了这款vuedraggable控件,供大家参考,具体内容如下
如上图要实现这些控件的拖拽排序
这是拖拽后
由于公司网络的原因,项目没有使用npm,都是使用的引入的js
<script type="text/javascript" src="/UploadFiles/2021-04-02/Sortable.min.js">布局代码
<el-form :inline="true"> <draggable v-model="filters" dragable="true" :move="getdata" @update="datadragEnd"> <transition-group> <el-col :span="8" v-for="filter in filters" :key="filter.filterKey" style="margin-top: 5px"> <el-form-item :label="filter.name" > <el-input v-model="filter.displayName" placeholder="请输入设置属性" @focus="openFilterDialog(filter)"></el-input> </el-form-item> </el-col> </transition-group> </draggable> <fitlerdialog v-bind:visable=dialogObjectVisible v-bind:avtivefilter=avtivefilter v-on:on-filter-data-change="onFilterDataChange" v-on:filterdialogcancle="handleDialogObjectcancle" v-on:filterdialogclose="handleDialogObjectClose"></fitlerdialog> </el-form>标签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.length;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:被拖拽元素的指向
大概就这些,功能较简单,但满足了要求就行。
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。
华山资源网 Design By www.eoogi.com
广告合作:本站广告合作请联系QQ:858582 申请时备注:广告合作(否则不回)
免责声明:本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除!
免责声明:本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除!
华山资源网 Design By www.eoogi.com
暂无评论...
更新日志
2024年09月23日
2024年09月23日
- 贵族音乐《古典名曲与轻音乐钢琴 打开宝宝睡眠开关》[FLAC/分轨][251.78MB]
- 黄韵玲2001-巴结音乐[全员集合][WAV+CUE]
- 郑绪岚2015-流金岁月·精选[首版][WAV+CUE]
- 周冰倩1995《沧桑情歌》JVC日本录制[WAV+CUE]
- 辛禄乐队.2024-热烈的少年【星辰】【FLAC分轨】
- 成龙.1996-龙的心【滚石】【WAV+CUE】
- 童安格.1991-一世情缘【宝丽金】【WAV+CUE】
- 韩红2010-擦肩而过[央金玛][WAV+CUE]
- RiccardoTesi-UnballoLiscio,Vol.II(2024)[24-48]FLAC
- 金池VS刘罡2009《双声情》[WAV+CUE]
- 冯奥迪《卄》[320K/MP3][67.08MB]
- 冯奥迪《卄》[FLAC/分轨][172.46MB]
- Merryland《Merryland》[320K/MP3][69.48MB]
- 苏芮.1991-停在我心里的温柔【福茂】【WAV+CUE】
- 苏慧伦.2020-面面Every.Side.of.Me【相信音乐】【WAV+CUE】