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 相关文章推荐
JqGrid web打印实现代码
May 31 Javascript
jQuery实现MSN中文网滑动Tab菜单效果代码
Sep 09 Javascript
JavaScript编程中布尔对象的基本使用
Oct 25 Javascript
Vue表单实例代码
Sep 05 Javascript
使用jquery给新生的th绑定hover事件的实例
Feb 10 Javascript
详细AngularJs4的图片剪裁组件的实例
Jul 12 Javascript
JavaScript面向对象精要(下部)
Sep 12 Javascript
layui 监听表格复选框选中值的方法
Aug 15 Javascript
Vue.js子组件向父组件通信的方法实例代码详解
Dec 10 Javascript
如何解决js函数防抖、节流出现的问题
Jun 17 Javascript
简述ES6新增关键字let与var的区别
Aug 23 Javascript
vue使用keep-alive实现组件切换时保存原组件数据方法
Oct 30 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
PHP Class&amp;Object -- PHP 自排序二叉树的深入解析
2013/06/25 PHP
JavaScript创建命名空间的5种写法
2014/06/24 PHP
让whoops帮我们告别ThinkPHP6的异常页面
2020/03/02 PHP
自己的js工具 Event封装
2009/08/21 Javascript
jquery与google map api结合使用 控件,监听器
2010/03/04 Javascript
设置jsf的选择框h:selectOneMenu为不可编辑状态的方法
2014/01/07 Javascript
Angular Js文件上传之form-data
2015/08/28 Javascript
jQuery简单实现input文本框内灰色提示文本效果的方法
2015/12/02 Javascript
jQuery模拟360浏览器切屏效果幻灯片(附demo源码下载)
2016/01/29 Javascript
基于jquery实现智能提示控件intellSeach.js
2016/03/17 Javascript
angularjs之$timeout指令详解
2017/06/13 Javascript
vue 将页面公用的头部组件化的方法
2017/12/18 Javascript
原生JS实现的自动轮播图功能详解
2018/12/28 Javascript
新年快乐! javascript实现超级炫酷的3D烟花特效
2019/01/30 Javascript
简单使用webpack打包文件的实现
2019/10/29 Javascript
Python与Java间Socket通信实例代码
2017/03/06 Python
解决uWSGI的编码问题详解
2017/03/24 Python
Pyinstaller将py打包成exe的实例
2018/03/31 Python
查看django版本的方法分享
2018/05/14 Python
python 利用栈和队列模拟递归的过程
2018/05/29 Python
实例讲解Python中浮点型的基本内容
2019/02/11 Python
Django框架视图层URL映射与反向解析实例分析
2019/07/29 Python
python多继承(钻石继承)问题和解决方法简单示例
2019/10/21 Python
TensorFlow学习之分布式的TensorFlow运行环境
2020/02/05 Python
详解python中groupby函数通俗易懂
2020/05/14 Python
openCV提取图像中的矩形区域
2020/07/21 Python
英国No.1文具和办公用品在线:Euroffice
2016/09/21 全球购物
布鲁明戴尔百货店:Bloomingdale’s
2016/12/21 全球购物
XML文档定义有几种形式?它们之间有何本质区别?解析XML文档有哪几种方式?
2016/01/12 面试题
2014年应届大学生自我评价
2014/01/09 职场文书
八项规定对照检查材料
2014/08/31 职场文书
医生党的群众路线教育实践活动个人对照检查材料
2014/09/23 职场文书
先进典型发言材料
2014/12/30 职场文书
2015教师年度考核评语
2015/03/25 职场文书
纪律委员竞选稿
2015/11/19 职场文书
nginx优化的六点方法
2021/03/31 Servers