draggable拖拽组件使用

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

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

draggable拖拽组件使用_第1张图片

这里说一下实现原理。

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

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

  1. group:拖拽分组,多组之间相互拖拽,可以实现不同数组之间相互拖拽。比如group都为itxst的组之间可以相互拖动,本文例子中分别给两个draggable设置了不同的group属性,是防止大的被拖到小的块里面去
  2. list:作为值属性的替代,list是一个与拖放同步的数组。这里在二级draggable使用了该属性,因为两个draggable用到了同一数据源,二级draggable中用list替代v-model

  3. animation:通过animation属性设置vue.draggable过渡效果,这样拖动时过渡位置就不会显的太生硬。

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

  5. end():拖拽完成时的事件,如果想和后端实现动态更新,可以在这个方法里面和后端进行数据交互

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

// 第一步,安装vue.draggable插件,yarn或者npm都可以
yarn add vuedraggable
npm i -S vuedraggable
// 第二步,使用插件
import draggable from 'vuedraggable'
{ { process.opListName }}
{ { task.opTaskTitle }}
{ { task.opTaskHandler }}
添加任务
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: "任务二"}) }, }

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

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

你可能感兴趣的:(Vue,vue实现拖拽功能,draggable使用,draggable多层拖拽)