vue.draggable拖动插件的使用

vue.draggable拖动插件的使用

前言

在Vue的一些项目里面需要对元素进行拖动的处理，可以使用之前的SortableJs来实现，这里介绍一些vue.draggable的实现以及一些配置

下载

首先我们需要在Vue里面下载好需要的包：

npm i -S vuedraggable	

或者使用cdn的方式引入：

<script src="https://www.itxst.com/package/vue/vue.min.js"></script>
<script src="https://www.itxst.com/package/sortable/Sortable.min.js"></script>
<script src="https://www.itxst.com/package/vuedraggable/vuedraggable.umd.min.js"></script>

示例

在干净的Vue2.x界面书写下面简单的代码

<template>
  <div id="app" style="padding: 10px">
    <!--使用draggable组件-->
    <div class="itxst">
      <div class="col">
        <div class="title">左侧盒子</div>
        <draggable
          v-model="arr1"
          group="site"
          animation="300"
          dragClass="dragClass"
          ghostClass="ghostClass"
          chosenClass="chosenClass"
          @start="onStart"
          @end="onEnd"
        >
          <transition-group>
            <div class="item" v-for="item in arr1" :key="item.id">{{ item.name }}</div>
          </transition-group>
        </draggable>
      </div>
      <div class="col">
        <div class="title">右侧盒子</div>
        <draggable
          v-model="arr2"
          group="site"
          animation="100"
          dragClass="dragClass"
          ghostClass="ghostClass"
          chosenClass="chosenClass"
          @start="onStart"
          @end="onEnd"
        >
          <transition-group>
            <div class="item" v-for="item in arr2" :key="item.id">{{ item.name }}</div>
          </transition-group>
        </draggable>
      </div>
    </div>
  </div>
</template>

<script>
import draggable from 'vuedraggable'
export default {
  data() {
    return {
      drag: false,
      arr1: [
        { id: 1, name: '左侧盒子一' },
        { id: 2, name: '左侧盒子二' },
        { id: 3, name: '左侧盒子三' },
        { id: 4, name: '左侧盒子四' }
      ],
      arr2: [
        { id: 1, name: '右侧盒子一' },
        { id: 2, name: '右侧盒子二' },
        { id: 3, name: '右侧盒子三' },
        { id: 4, name: '右侧盒子四' }
      ]
    }
  },
  methods: {
    onStart() {
      this.drag = true
    },
    onEnd() {
      this.drag = false
    }
  },
  components: {
    draggable
  }
}
</script>

<style lang="less" scoped>
.ghostClass {
  background-color: blue !important;
}

.chosenClass {
  background-color: black !important;
  color: white !important;
}

.dragClass {
  background-color: skyblue !important;
}

.itxst {
  margin: 10px;
}

.title {
  padding: 6px 12px;
}

.col {
  width: 40%;
  flex: 1;
  padding: 10px;
  border: solid 1px #eee;
  border-radius: 5px;
  float: left;
}

.col + .col {
  margin-left: 10px;
}
.item {
  padding: 6px 12px;
  margin: 0px 10px 0px 10px;
  border: solid 1px #eee;
  background-color: #f1f1f1;
}

.item:hover {
  background-color: #fdfdfd;
  cursor: move;
}

.item + .item {
  border-top: none;
  margin-top: 6px;
}
</style>

主要的使用方法就是引入好组件：

import draggable from 'vuedraggable'

再注册好组件：

components: {draggable}

后面直接使用标签即可，在标签上面配置好相应的方法，内部的内容使用<transition-group>包裹

属性列表

对于draggable的属性列表主要有以下：

1. group属性

// 设置方式一，直接设置组名

​ group:‘itxst’

//设置方式，object，也可以通过自定义函数function实现复杂的逻辑

​ group:{ name:‘itxst’, //组名为itxst

​ pull: true|false| ‘clone’|array|function, //是否允许拖出当前组

​ put:true|false|array|function, //是否允许拖入当前组 }

2. delay

   鼠标按下后等待n秒才允许拖动，此属性可以一定程度上防止误触操作，比如设置delay为1000表示按下

   一秒后才允许拖动。

3. disabled属性

   实现开启或禁用vue.draggable的拖拽效果。

4. scroll属性

   容器有滚动条时是否允许滚动及当父容器元素有滚动条时是否允许拖动，默认为true

5. animation属性

   设置vue.draggable过渡效果，这样拖动时过渡位置就不会显的太生硬，默认为0。

6. handle属性

   当鼠标落在handle指定的元素上面时才允许拖动

7. filter属性

   如果你想设置某个元素或对象不允许拖动拖拽把这些元素的样式名称设置到filter属性即可，本文将实现包含forbid样式的元素将无法拖动,第一行无法拖动,也无法拖动到第一行，用到filter和move属性

8. chosenClass属性

   设置选中元素的样式，可以通过自定义样式来方便的区分出那个元素被选中。

9. ghostClass属性

   目标位置占位符的样式及需要停靠位置的样式。

10. clone属性

    实现常用菜单功能，从一个拖拽组拖动到另外一个组而原来的那种组的元素不移除。

事件列表

start	   开始拖动时触发的事件
add	       从一个数组拖拽到另外一个数组时触发的事件
remove	   移除事件
update	   拖拽变换位置时触发的事件
end	       拖拽完成时的事件
choose	   鼠标点击选中要拖拽元素时的事件
unchoose   选中后松开鼠标的事件
sort	   位置变化时的事件
clone	   从一个数组拖拽到另外一个数组时触发的事件和add不同，clone是复制了数组元素

最后附上中文网的地址供参考：<vue.draggable中文文档 - itxst.com>