Vue 拖拽组件 vuedraggable

「这是我参与2022首次更文挑战的第11天，活动详情查看：2022首次更文挑战」。

在vue中常常用到拖拽功能，例如，排序等，可以使用vuedraggable组件来实现，我们一起看看吧~

1.安装vuedraggable

npm i vuedraggable -S

2.使用v-model来绑定数据

3.options用来返回不可编辑的情况

4.一个例子

<template>
  <vuedraggable class="wrapper" v-model="list" :options="draggableOption">
    <transition-group>
      <div v-for="item in list" :key="item" class="item">
        <p>{{item}}</p>
      </div>
    </transition-group>
  </vuedraggable>
</template>

<script>
import vuedraggable from 'vuedraggable';

export default {
  name: 'HelloWorld',
  components: { vuedraggable },
  data() {
    return {
      list: [1,2,34,4,54,5]
    }
  },
  computed: {
      // 是否可以拖动
        draggableOption() {
            return {
                disabled: !this.ifEdit,
            };
        },
  },
  updated() {
    console.log(this.list)
  },
}
</script>
<style scoped>
.wrapper {
  display: flex;
  justify-content: center;
  width: 100%;
}
.item{
  width: 300px;
  height: 50px;
  background-color: #42b983;
  color: #ffffff;
}
</style>

5.属性列表

属性名称	说明
scroll	默认为true,容器有滚动条时是否允许拖动到被隐藏的区域
animation	0	拖动时的过渡效果
handle	空	指定可拖动元素的样式名称
filter	空	禁止拖动元素的样式名称

group 拖拽分组

vue.draggable group 拖拽分组多组之间相互拖拽，可以实现不同数组之间相互拖拽。比如group都为itxst的组之间可以相互拖动，本文例子中A列和B列可以相互拖动，但是无法拖到C列。

delay响应时间

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

<draggable v-model="arr1" delay="1000" 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>

disabled启用禁用

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

<draggable v-model="arr1" :disabled="disabled" animation="300" @start="onStart" @end="onEnd"> <transition-group> <div class="item" v-for="item in arr1" :key="item.id">{{item.name}}</div> </transition-group> </draggable>

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

<draggable v-model="arr1" group="itxst" ghostClass="ghost" chosenClass="chosen" filter=".forbid" animation="300" :move="onMove"> <transition-group> <div :class="item.id==1?'item forbid':'item'" v-for="item in arr1" :key="item.id">{{item.name}}</div> </transition-group> </draggable>

ghostClass选中样式

vue.draggable ghostClass 目标位置占位符的样式及需要停靠位置的样式。

<draggable v-model="arr1" group="itxst" ghostClass="ghost" chosenClass="chosen" filter=".forbid" animation="300" :move="onMove"> <transition-group> <div :class="item.id==1?'item forbid':'item'" v-for="item in arr1" :key="item.id">{{item.name}}</div> </transition-group> </draggable>

clone拷贝拖拽

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

属性	说明
clone	:options="{group:{name: 'itxst',pull:'clone'},sort: true}" group属性的clone表示允许克隆被拖动的元素>
move	move事件用来控制那个元素不允许被拖拽和获取当前拖动元素的对象
end	end拖拽结束事件，用来判断是否已经存在对象