vue.draggable可拖动组件使用方法

安装方式

npm install -S vuedraggable

全局组件注册

import Vue from 'vue';
import Draggable from 'vuedraggable'
Vue.component('Draggable', Draggable)

局部组件注册

<script>
  import Draggable from 'vuedraggable'
  export default {
    data() {
      return {}
    },
    components: {
      Draggable
    }
  }
<script>

基础使用

使用Draggable包裹,使用animation属性设置过渡效果

<template>
  <Draggable
    v-model="list"
    animation="300"
  >
    <transition-group>
      <div v-for="item in list" :key="item.id" class="drag-item">
        {{ item.name }}
      </div>
    </transition-group>
  </Draggable>
</template>

<script>
export default {
  data() {
    return {
      list: [
        { name: 'zs', age: 18, id: 1 },
        { name: 'lisi', age: 20, id: 2 },
        { name: 'wangwu', age: 19, id: 3 }
      ]
    }
  }
}
</script>

鼠标在指定元素上才允许拖动

通过handle定义可拖动元素的样式名称

<template>
  <Draggable
    v-model="list"
    animation="300"
    handle=".move-drag"
  >
    <transition-group>
      <div v-for="item in list" :key="item.id" class="drag-item">
        <i class="el-icon-rank move-drag" />
        {{ item.name }}
      </div>
    </transition-group>
  </Draggable>
</template>

<script>
export default {
  data() {
    return {
      list: [
        { name: 'zs', age: 18, id: 1 },
        { name: 'lisi', age: 20, id: 2 },
        { name: 'wangwu', age: 19, id: 3 }
      ]
    }
  }
}
</script>

不允许拖动的元素

filter属性定义不可拖动元素的样式名称，该元素则不可拖动，通过move事件，禁止其他元素拖动到它这一行

<template>
  <Draggable
    v-model="list"
    animation="300"
    handle=".move-drag"
    filter=".forbid"
    :move="filterMove"
  >
    <transition-group>
      <div 
        v-for="item in list" 
        :key="item.id" 
        class="drag-item" 
        :class="{forbid: item.id === 1}"
      >
        <i class="el-icon-rank move-drag" />
        {{ item.name }}
      </div>
    </transition-group>
  </Draggable>
</template>

<script>
export default {
  data() {
    return {
      list: [
        { name: 'zs（不允许停靠和拖拽）', age: 18, id: 1 },
        { name: 'lisi', age: 20, id: 2 },
        { name: 'wangwu', age: 19, id: 3 }
      ]
    }
  },
  methods: {
    // 禁止拖动到id为1的那一行
    filterMove(e) {
      console.log(e.relatedContext.element.id, '禁止拖动的id')
      if (e.relatedContext.element.id == 1) return false
      return true
    }
  }

}
</script>

设置选中样式 和 目标位置的样式

chosenClass属性用来设置选中时的样式，ghostClass属性用来设置目标位置的样式

<template>
  <Draggable
    v-model="list"
    animation="300"
    handle=".move-drag"
    filter=".forbid"
    :move="filterMove"
    chosen-class="chose"
    ghost-class="ghost"
  >
    <transition-group>
      <div 
        v-for="item in list" 
        :key="item.id" 
        class="drag-item" 
        :class="{forbid: item.id === 1}"
      >
        <i class="el-icon-rank move-drag" />
        {{ item.name }}
      </div>
    </transition-group>
  </Draggable>
</template>

<script>
export default {
  data() {
    return {
      list: [
        { name: 'zs（不允许停靠和拖拽）', age: 18, id: 1 },
        { name: 'lisi', age: 20, id: 2 },
        { name: 'wangwu', age: 19, id: 3 }
      ]
    }
  },
  methods: {
    // 禁止拖动到id为1的那一行
    filterMove(e) {
      console.log(e.relatedContext.element.id, '禁止拖动的id')
      if (e.relatedContext.element.id == 1) return false
      return true
    }
  }

}
</script>
<style lang="scss" scoped>
.drag-item {
  &.chose {
    background: skyblue;
    color: #fff;
  }
  &.ghost {
    background: pink;
  }
}
</style>