当前位置:   article > 正文

记录Vue.Draggable拖拽组件的使用历程_vuedraggerable

vuedraggerable

项目开发中需要用到 拖拽组件,因为 前端技术框架 是 Vue2

这里就使用了 Vue 的一款 拖拽插件 vue.draggable

一般基本的需求都能满足 ,这里使用了多个 draggable 嵌套,达到两级之间相互拖拽的功能。

以下是类似 teambition 的效果图片,最外层为一个 draggable ,可以左右拖动,

然后每个块里面还有小块,小块组成一个 draggable ,

可以上下拖动,也可以在大的块之间拖动。 

这里说一下实现原理。

首先,要搞清楚 draggable 的 Api ,

Vue.Draggable 是一款基于 Sortable.js 实现的 Vue 拖拽插件

支持 移动设备、拖拽 和 选择文本、智能滚动 ,

可以在 不同列表间 拖拽、不依赖 jQuery 为基础、Vue2 过渡动画兼容、支持撤销操作 ,

使用起来特别简单,对被拖拽元素也没有 CSS 样式的特殊要求。

中文文档 :

vue.draggable中文文档 - itxst.com

里面 基本属性 和 方法都有讲到 ,有时间的可以去学习一下,

要查看详细的说明可以去 git 看官方文档说明,

官方文档 :

GitHub - SortableJS/Vue.Draggable: Vue drag-and-drop component based on Sortable.js

这里用到了以下几个属性和事件,着重说明下:

1、group拖拽分组 ,多组之间相互拖拽 ,可以实现不同数组之间相互拖拽

比如 group 都为 itxst 的组之间才可以相互拖动,

本文例子中分别给两个 draggable 设置了不同的 group 属性,是防止大的被拖到小的块里面去

示例 :group="viewer"  或  group : { name: "viewer", pull: "clone", put: false } 

2、sort : 是否开启内部排序( true / false )

3、disable : 通过 disabled 属性实现 开启 或 禁用 vue.draggable 的 拖拽效果

4、animation :通过 animation 属性设置 vue.draggable 过渡效果

这样拖动时 过渡位置 就不会显的太生硬 。

5、handle : 设置(限制)可拖拽区域

6、ghostClass :目标位置占位符的样式及需要停靠位置的样式

7、chosenClass :被选中目标的样式

8、dragClass :拖动元素的样式

9、list :作为 值属性 的 替代 ,list 是一个与 拖放 同步 的 数组

( 比如说, :list = "data" , 就是说,拖拽组件里面的内容数据绑定了 这个 data 值,

一开始这个 data 可能为 [ ] 空数组,但后续通过绑定 @add="addCommand" ,

即可通过拖拽生成事件来将所拖拽内容本身的数据内容添加至 data 数组中去了,

也就是通过拖拽新生成的数据内容会实时更新至 data 里面了,因此 data 也就有了数据 。)

这里在 二级 draggable 使用了该属性 ,因为 两个 draggable 用到了同一数据源 ,

二级 draggable 中用 list 替代 v-model

10、move : 自定义控制那些元素可以拖拽或不允许拖拽并控制是否允许停靠

11、start() : 开始拖动时触发的事件

12、add() :从一个数组拖拽到另外一个数组时触发的事件

11、end() :拖拽完成时的事件

如果想和后端实现动态更新,可以在这个方法里面和后端进行数据交互

tag : 自定义 导航编译生成后的 HTML 标签


然后就是示例 demo 了,这里一些代码段,样式什么的大家可以自由发挥

1、第一步 ,安装 vue.draggable 插件,yarn 或者 npm 都可以
yarn add vuedraggable
npm i -S vuedraggable

"vuedraggable": "^2.43.3"
2、第二步 ,使用插件
import draggable from 'vuedraggable'

3、注册组件

components: { draggable }

  1. <script>
  2. import draggable from "vuedraggable";
  3. export default {
  4. components: { draggable },
  5. data() {
  6. return {
  7. disabled: false,
  8. // 定义要被拖拽对象的数组
  9. arr1: [
  10. { id: 1, name: "www.itxst.com(不允许停靠)" },
  11. { id: 2, name: "www.jd.com" },
  12. { id: 3, name: "www.baidu.com" },
  13. { id: 5, name: "www.google.com" },
  14. { id: 4, name: "www.taobao.com(不允许拖拽)" },
  15. ],
  16. };
  17. },
  18. methods: {
  19. // move回调方法
  20. moveCommand(e) {
  21. // 目标是容器不允许停靠
  22. if (
  23. e.relatedContext.element &&
  24. e.relatedContext.element.type === "container"
  25. )
  26. return false;
  27. // 布局容器不允许容器拖拽
  28. if (
  29. e.relatedContext.element &&
  30. e.draggedContext.element.type === "container"
  31. )
  32. return false;
  33. return true;
  34. },
  35. // 开始拖动时触发的事件
  36. startCommand(e) {
  37. console.log("移动中...", e);
  38. },
  39. // 从一个数组拖拽到另外一个数组时触发的事件
  40. addCommand(e) {},
  41. // 拖拽完成时的事件
  42. endCommand(e) {
  43. console.log("结束移动...", e);
  44. },
  45. },
  46. };
  47. </script>

  1. <div>
  2. <draggable class="list-group" group="task" v-model="projectList" @end="draggerEnd()">
  3. <div class="card-list-span" v-for="(process, index) in projectList" :key="process.opListId">
  4. <div class="span-header">
  5. <div class="header-title">
  6. {{ process.opListName }}
  7. </div>
  8. </div>
  9. <div class="span-body">
  10. <div class="body-list">
  11. <draggable
  12. group="project"
  13. :list="process.taskVoList"
  14. @end="taskDraggerEnd()"
  15. >
  16. <div
  17. class="body-list-span"
  18. v-for="task in process.taskVoList"
  19. :key="task.opTaskId"
  20. >
  21. <div>
  22. {{ task.opTaskTitle }}
  23. </div>
  24. <div>{{ task.opTaskHandler }}</div>
  25. </div>
  26. </draggable>
  27. <div slot="footer">
  28. <Author author="yunygl-yylcgl-cjrw">
  29. <div class="add-task" @click="addTask(index)">
  30. <i class="el-icon-plus" style="margin-right: 5px;"></i>
  31. 添加任务
  32. </div>
  33. </Author>
  34. </div>
  35. </div>
  36. </div>
  37. </div>
  38. </draggable>
  39. </div>
  40. data() {
  41. return {
  42. projectList: [
  43. {
  44. id: "001",
  45. name: "流程一",
  46. taskList: [
  47. {id: "001001",taskTitle: "任务一"},
  48. {id: "001002",taskTitle: "任务二"}
  49. ]
  50. },
  51. {
  52. id: "002",
  53. name: "流程二",
  54. taskList: [
  55. {id: "002001",taskTitle: "任务一"}
  56. ]
  57. }
  58. ]
  59. }
  60. method: {
  61. // 添加任务
  62. addTask(index) {
  63. this.projectList[index].taskList.push( {id: "00200232",taskTitle: "任务二"})
  64. },
  65. }

项目使用 :

声明:本文内容由网友自发贡献,不代表【wpsshop博客】立场,版权归原作者所有,本站不承担相应法律责任。如您发现有侵权的内容,请联系我们。转载请注明出处:https://www.wpsshop.cn/w/小蓝xlanll/article/detail/421758
推荐阅读
相关标签
  

闽ICP备14008679号