vuedraggable+element ui实现页面控件拖拽排序效果


Posted in Javascript onJuly 29, 2020

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

vuedraggable+element ui实现页面控件拖拽排序效果

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

vuedraggable+element ui实现页面控件拖拽排序效果

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

<script type="text/javascript" src="lib/sortable/Sortable.min.js"></script>
<script type="text/javascript" src="lib/vuedraggable/vuedraggable.min.js"></script>

布局代码

<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,他的内容较多。

vuedraggable+element ui实现页面控件拖拽排序效果

draggedContext: 被拖拽元素的上下文

index:拖拽元素的指针
element: 拖拽数据本身
futureIndex: 拖动后的index

element如图:

vuedraggable+element ui实现页面控件拖拽排序效果

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

relatedContext: 拖入区域的上下文

index: 目标元素的index
element:目标数据本身
list: 拖入的列表
component:目标组件

dragged:被拖拽元素的指向

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

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
javascript 火狐(firefox)不显示本地图片问题解决
Jul 05 Javascript
javascript AutoScroller 函数类
May 29 Javascript
jquery对dom的操作常用方法整理
Jun 25 Javascript
jquery提取元素里的纯文本不包含span等里的内容
Sep 30 Javascript
js截取固定长度的中英文字符的简单实例
Nov 22 Javascript
javascript删除html标签函数cIsHTML
Jan 09 Javascript
canvas实现探照灯效果
Feb 07 Javascript
微信小程序 基础知识css样式media标签
Feb 15 Javascript
vue模板语法-插值详解
Mar 06 Javascript
Vue.js 中的 $watch使用方法
May 25 Javascript
怎样使你的 JavaScript 代码简单易读(推荐)
Apr 16 Javascript
CKEditor扩展插件:自动排版功能autoformat插件实现方法详解
Feb 06 Javascript
Vue组件Draggable实现拖拽功能
Dec 01 #Javascript
BootStrap modal实现拖拽功能
Dec 01 #Javascript
vuejs2.0运用原生js实现简单拖拽元素功能
Aug 21 #Javascript
BootStrap table实现表格行拖拽效果
Dec 01 #Javascript
一次Webpack配置文件的分离实战记录
Nov 30 #Javascript
基于Vue组件化的日期联动选择器功能的实现代码
Nov 30 #Javascript
vue拖拽排序插件vuedraggable使用方法详解
Aug 21 #Javascript
You might like
定制404错误页面,并发信给管理员的程序
2006/10/09 PHP
PHP模块 Memcached功能多于Memcache
2011/06/14 PHP
php中使用getimagesize获取图片、flash等文件的尺寸信息实例
2014/04/29 PHP
php实现的任意进制互转类分享
2015/07/07 PHP
php实现在新浪云中使用imagick生成缩略图并上传的方法
2016/09/26 PHP
PHP对象实例化单例方法
2017/01/19 PHP
PHP基于socket实现的简单客户端和服务端通讯功能示例
2017/07/10 PHP
php实现数组中出现次数超过一半的数字的统计方法
2018/10/14 PHP
window.location.href的用法(动态输出跳转)
2014/08/09 Javascript
怎么通过onclick事件获取js函数返回值(代码少)
2015/07/28 Javascript
JavaScript类型检测之typeof 和 instanceof 的缺陷与优化
2016/01/13 Javascript
JavaScript中原型链存在的问题解析
2016/09/25 Javascript
Bootstrap Modal遮罩弹出层(完整版)
2016/11/21 Javascript
jquery实现(textarea)placeholder自动换行
2016/12/22 Javascript
详解Python中logging日志模块在多进程环境下的使用
2016/12/26 Javascript
利用node.js写一个爬取知乎妹纸图的小爬虫
2017/05/03 Javascript
使用 vue 实现灭霸打响指英雄消失的效果附demo
2019/05/06 Javascript
angular4应用中输入的最小值和最大值的方法
2019/05/17 Javascript
[09:47]2018DOTA2亚洲邀请赛4.5SOLO赛 No[o]ne vs Sumail
2018/04/06 DOTA
python自定义类并使用的方法
2015/05/07 Python
python实现kNN算法
2017/12/20 Python
pytorch + visdom CNN处理自建图片数据集的方法
2018/06/04 Python
python内存监控工具memory_profiler和guppy的用法详解
2019/07/29 Python
使用python-pptx包批量修改ppt格式的实现
2020/02/14 Python
django实现日志按日期分割
2020/05/21 Python
pycharm设置默认的UTF-8编码模式的方法详解
2020/06/01 Python
基于Python下载网络图片方法汇总代码实例
2020/06/24 Python
如何通过安装HomeBrew来安装Python3
2020/12/23 Python
HTML5中外部浏览器唤起微信分享功能的代码
2020/09/15 HTML / CSS
英国网上花店:Bunches
2016/11/29 全球购物
美国在线购买空气净化器、除湿器、加湿器网站:AllergyBuyersClub
2021/03/16 全球购物
餐厅经理岗位职责和岗位目标
2014/02/13 职场文书
机关作风整顿个人整改措施2014
2014/09/17 职场文书
2015年女工委工作总结
2015/07/27 职场文书
WCG2010 星际争霸决赛 Flash vs Goojila 1 星际经典比赛回顾
2022/04/01 星际争霸
css中有哪些方式可以隐藏页面元素及区别
2022/06/16 HTML / CSS