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

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

这是拖拽后

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

布局代码

标签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[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:被拖拽元素的指向

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

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持萬仟网。

如您对本文有疑问或者有任何想说的，请点击进行留言回复，万千网友为您解惑！

element ui 图片控件 排序_vuedraggable+element ui实现页面控件拖拽排序效果相关推荐

  1. vue中实现拖拽排序

    原生拖拽 API 实现拖拽 设置元素 dragable 将元素的 dragable 属性设置 为 true (文本 图片 链接 的draggable 属性默认为 true)则元素可拖放 <div ...

  2. Android表格拖拽排序,Android 拖拽排序控件 DragGridView

    Android 拖拽排序控件 DragGridView Android 开发中,我们经常会遇到条目拖拽排序的需求,特别是在新闻类应用中就更普遍了.其实,我们在网上可以搜到许多关于拖拽排序的自定义控件, ...

  3. Vue Element 表格实现拖拽排序

    1.安装sortablejs npm install sortablejs --save 2.在需要的页面引入 import Sortable from 'sortablejs' 3.具体使用,注意的 ...

  4. Android拖拽排序控件DragGridView

    Android开发中,我们经常会遇到条目拖拽排序的需求,特别是在新闻类应用中就更普遍了.其实,我们在网上可以搜到许多关于拖拽排序的自定义控件,今天,为大家介绍的是一个拖拽排序库DragGridView ...

  5. Vue + Element 表格拖拽排序、树形表格拖拽排序

    今天给大家分享一下表格(列表)及树形表格拖拽排序,树形表格排序的教程不多,可能还会有问题,我在这里详细给大家讲解一下,如果你有这样的需求或觉得有用,请给个关注或收藏一下吧,方便后期查看使用. 安装so ...

  6. 拖拽删除元素、拖拽排序、拖拽预览图片和拖拽移动元素

    介绍 HTML5 提供了专门的拖拽与拖放的 API,目前各浏览器都已支持,包括 IE.HTML 拖放(Drag and Drop)接口使应用程序能够在浏览器中使用拖放功能.例如,用户可使用鼠标选择可拖 ...

  7. JS的平凡之路--简易的图片拖拽排序

    由HTML5的拖放API,实现的简易图片拖放效果. 一.HTML5拖放API的知识点   首先我们得知道元素怎么才可以被拖放,需要设置它们的draggable属性,其中img和a标签的dragable ...

  8. ToolStrip控件左右拖拽移动效果实现

    1.主窗体下部添加一个Panel乘放ToolStrip控件以实现ToolStrip在窗体下部定位. 2.当ToolStrip控件中子控件超出屏幕时,拖动控件可以实现滑动效果.拖动到控件边缘距窗体边缘1 ...

  9. 前端项目中常用的工具包（拖拽排序表格、打印导出表格、文本复制等）【持续更新~~~】

    表格类: cdn库 cdn vxe-table[开源的多功能表格] 简介 一个基于 vue 的 PC 端表格组件,支持增删改查.虚拟滚动.懒加载.快捷菜单.数据校验.树形结构.打印导出.表单渲染.数据 ...

最新文章

  1. VTK修炼之道30：图像重采样_降采样和升采样技术
  2. extjs5的grid垂直滚动条bug_Extjs grid panel 滚动条失效的解决方法
  3. Ubuntu Linux将支持所有树莓派设备
  4. c++中BOOL和bool的区别
  5. WEB_面试题_第三阶段
  6. php创建输入文本框,Asp：文本框与输入文本(PHP开发人员学习ASP)
  7. 2017.10.24 上升序列 思考记录
  8. Python 3.7 即将发布，引入多项新功能！
  9. 爱数助力国资委实现混合IT环境下的业务保护
  10. APUE读书笔记-08进程控制（08）
  11. 秩为 1 的矩阵的一些性质
  12. LM小型可编程控制器软件（基于CoDeSys）笔记二十七：温度电阻通道和DO通道
  13. mysql sending data_MySQL：sending data状态包含了什么
  14. C++中fstream的用法
  15. 浅浅的介绍一下STL
  16. window7取消文件默认打开方式的方法
  17. 公众号榜单 | 2020·4月公众号原创排行榜重磅发布
  18. 基于C++的自动驾驶公交车调度系统
  19. java字符串校验，过滤筛选中英文符号
  20. mini车f和r的区别_MINI车型这么多特殊版本怎么区分？

热门文章

  1. 【Kafka】Elasticsearch 与 Kafka 整合剖析
  2. 【Kafka】Kafka 1.1.0以后版本获取Kafka每个分区最新Offset的几种方法
  3. 【hortonworks/registry】registry 如何添加新的类型 支持 json
  4. 95-240-040-原理-State-简介
  5. 【Flink】Object Reuse 模式（Stream API） 性能优化 chain 数据重用 不深拷贝
  6. Kudu : NonRecoverableException: Got out-of-order key column
  7. scala学习-scala中的元组Tuple概念
  8. 如何选择RabbitMQ和Kafka
  9. 干掉Dubbo ！这个后端开发框架就是王者！
  10. 面试中常问多线程相关的知识，在工作中到底用在哪里呢？