浅谈使用element ui + vuedraggable + sortablejs实现多种版式布局及托拽(2)

来源:互联网 发布:聚类算法分类电子表格 编辑:程序博客网 时间:2024/06/07 07:09

接下来是实现托拽排序,使用方法

  • 在项目根目录打开cmd命令
  • 安装vuedraggable 、sortablejs;
  • 命令
  • npm install vuedraggable

  • npm insall sortablejs

  • 在需要使用的界面引入

import draggable from 'vuedraggable'import Sortable  from 'sortablejs'

注册组件

 components:{        draggable,        Sortable    },

vue文件里

这里写图片描述

实现效果
这里写图片描述

这里写图片描述

注意事项:vue组件盒子
这里写图片描述

存储到后台数据需要使用事件

start, move, end 托拽三个过程。

参考资料地址:https://github.com/SortableJS/Vue.Draggable

原创粉丝点击