draggable拖拽组件使用

项目开发中需要用到拖拽组件，因为前端技术框架是vue，这里就使用了vue的一款拖拽插件vue.draggable，一般基本的需求都能满足，这里使用了多个draggable嵌套，达到两级之前相互拖拽的功能。

以下是类似teambition的效果图片，最外层为一个draggable，可以左右拖动，然后每个块里面还有小块，小块组成一个draggable，可以上下拖动，也可以在大的块之间拖动。

这里说一下实现原理。

首先，要搞清楚draggable的api，这里提供以下博主自己发现的一个vue.draggable中文api地址vue.draggable中文文档（http://www.itxst.com/vue-draggable/tutorial.html），里面基本属性和方法都用讲到，有时间的可以去学习一下，要查看详细的说明可以git去看官方文档说明，官方文档（https://github.com/SortableJS/Vue.Draggable）。

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

group：拖拽分组，多组之间相互拖拽，可以实现不同数组之间相互拖拽。比如group都为itxst的组之间可以相互拖动，本文例子中分别给两个draggable设置了不同的group属性，是防止大的被拖到小的块里面去
list：作为值属性的替代，list是一个与拖放同步的数组。这里在二级draggable使用了该属性，因为两个draggable用到了同一数据源，二级draggable中用list替代v-model
animation：通过animation属性设置vue.draggable过渡效果，这样拖动时过渡位置就不会显的太生硬。
disable: 通过disabled属性实现开启或禁用vue.draggable的拖拽效果。
end()：拖拽完成时的事件，如果想和后端实现动态更新，可以在这个方法里面和后端进行数据交互

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

// 第一步，安装vue.draggable插件,yarn或者npm都可以
yarn add vuedraggable
npm i -S vuedraggable
// 第二步，使用插件
import draggable from 'vuedraggable'
<div><draggable class="list-group" group="task" v-model="projectList" @end="draggerEnd()"><div class="card-list-span" v-for="(process, index) in projectList" :key="process.opListId"><div class="span-header"><div class="header-title">{{ process.opListName }}</div></div><div class="span-body"><div class="body-list"><draggablegroup="project":list="process.taskVoList"@end="taskDraggerEnd()"><divclass="body-list-span"v-for="task in process.taskVoList":key="task.opTaskId"><div>{{ task.opTaskTitle }}</div><div>{{ task.opTaskHandler }}</div></div></draggable><div slot="footer"><Author author="yunygl-yylcgl-cjrw"><div class="add-task" @click="addTask(index)"><i class="el-icon-plus" style="margin-right: 5px;"></i>添加任务</div></Author></div></div></div></div></draggable>
</div>data() {return {projectList: [{id: "001",name: "流程一",taskList: [{id: "001001",taskTitle: "任务一"},{id: "001002",taskTitle: "任务二"}]},{id: "002",name: "流程二",taskList: [{id: "002001",taskTitle: "任务一"}]}]
}method: {// 添加任务addTask(index) {this.projectList[index].taskList.push( {id: "00200232",taskTitle: "任务二"})},
}

上面就是大致流程和部分代码。

小伙伴如果有疑问可以第一时间评论或留言，看到后也会及时回复的，有帮助的麻烦动动手指点个赞哟！

draggable拖拽组件使用相关推荐

draggable拖拽组件的使用
背景:左右两个数据栏,左侧为数据源,右侧为组建的目标数据.要实现左侧和右侧可以互相拖拽,但是左侧拖拽到右侧后源数据不变,右侧拖拽到左侧时,无论丢在左侧哪里都回到源数据原来的分组下:并且,左侧和右侧内部 ...
VUE 拖拽组件 vue.draggable
中文文档 https://www.itxst.com/vue-draggable/tutorial.html 安装 npm i -S vuedraggable 属性属性名称说明 group :gr ...
vue.draggable 拖拽 ant 组件布局
vue.draggable 拖拽项目需求中,需要支持拖拽,即找到了vue.draggable,下面来说一下基本使用方法 1.首先需要安装它,官网地址 https://www.itxst.com/vu ...
html 树形图可拖拽,HTML5拖拽API实现vue树形拖拽组件
因业务场景需要一个可拖拽修改节点位置的树形组件,因此动手撸了一个,乘此机会摸了一把html5原生拖拽.近期有时间将核心部分代码抽出,简单说下实现方式. 1.树形结构-组件递归使用树形结构非常简单,t ...
Vue 实现拖拽模块(二)自定义拖拽组件位置
上文介绍了拖拽添加组件的简单实现,本文将继续给大家分享如何自定义拖拽组件位置的简单实现,文中通过示例代码介绍,感兴趣的小伙伴们可以了解一下本文主要介绍了 Vue自定义拖拽组件位置的简单实现,具体 ...
vue3 draggable拖拽
!!首先安装 vuedraggable npm i -S vuedraggable@next 一定要带上@next,不然就会报错很恶心!使用建议看官网. 官网:vue.draggable中文文档 ...
react拖拉流程图_react 拖拽组件自由拖拽,垂直水平拖拽
import React, { useEffect, useState } from "react" import { Tree, message } from 'antd'; / ...
Vue 实现拖拽模块(三)自定义拖拽组件的样式
上文介绍了自定义拖拽组件位置的简单实现,本文将继续给大家分享如何自定义拖拽组件位置的简单实现,文中通过示例代码介绍,感兴趣的小伙伴们可以了解一下本文主要介绍了 Vue 自定义拖拽组件的样式,具体 ...
可视化拖拽组件库一些技术要点原理分析
本文已获得原作者的独家授权,有想转载的朋友们可以在后台联系我申请开白哦! PS:欢迎掘友们向我投稿哦,被采用的文章还可以送你掘金精美周边! 本文主要对以下技术要点进行分析: 编辑器自定义组件拖拽 ...

draggable拖拽组件使用

draggable拖拽组件使用相关推荐

最新文章

热门文章