vuedraggable在vue2.0和vue3.0 中的应用

vuedraggable
Vue.Draggable是一款基于Sortable.js实现的vue拖拽插件。支持移动设备、拖拽和选择文本、智能滚动，可以在不同列表间拖拽、不依赖jQuery为基础、vue 2过渡动画兼容、支持撤销操作，总之是一款非常优秀的vue拖拽组件。

1.vuedraggable特性

支持触摸设备
支持拖拽和选择文本
支持智能滚动
支持不同列表之间的拖拽
不以jQuery为基础
和视图模型同步刷新
和vue2的国度动画兼容
支持撤销操作
当需要完全控制时，可以抛出所有变化
可以和现有的UI组件兼容

2.安装

  // Vue 2.0: 
  npm install vuedraggable@5
  // Vue 3.0:
  npm install vuedraggable@next

3.UMD浏览器直接引用JS方式

<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>

4.组件中的引用

// Vue 2.0
import draggable from 'vuedraggable';
 
export default {
  components: {
    draggable
  },
  // ...
}
// Vue 3.0
import { draggable } from 'vuedraggable';
 
export default {
  components: {
    draggable
  },
  // ...
}

5.属性说明
如果下面的属性说明未能完全看明白，请访问非vue版 sortable.js 里面有更详细的例子。

group属性拖拽分组多组之间相互拖拽，可以实现不同数组之间相互拖拽。比如group都为itxst的组之间可以相互拖动。

(1)delay属性鼠标按下后等待n秒才允许拖动，此属性可以一定程度上防止误触操作，比如设置delay为1000表示按下一秒后才允许拖动。
(2)disabled属性实现开启或禁用vue.draggable的拖拽效果。
(3)scroll属性容器有滚动条时是否允许滚动及当父容器元素有滚动条时是否允许拖动。
(4)animation属性设置vue.draggable过渡效果，这样拖动时过渡位置就不会显的太生硬, 默认值0。
(5)handle属性当鼠标落在handle指定的元素上面时才允许拖动，如下面的例子只能点击加号区域才能拖动，点击其他区域则无法拖动。
(6)filter 如果你想设置某个元素或对象不允许拖动拖拽把这些元素的样式名称设置到filter属性即可，本文将实现包含forbid样式的元素将无法拖动,第一行无法拖动,也无法拖动到第一行，用到filter和move属性。
————————————————

                        版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

原文链接：https://blog.csdn.net/chengcheng9876/article/details/139632606

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

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

(8)ghostClass属性目标位置占位符的样式及需要停靠位置的样式。

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

6.事件说明

在vue2.0中的应用

<template>
  <div>
  <div>{{drag?'拖拽中':'拖拽停止'}}</div>
  <!--使用draggable组件-->
 <draggable v-model="myArray"  chosenClass="chosen" forceFallback="true" group="people" animation="1000" @start="onStart" @end="onEnd">
    <transition-group>
     <div class="item" v-for="element in myArray" :key="element.id">{{element.name}}</div>
    </transition-group>
</draggable> 
  </div>
</template>
<style scoped>
        /*被拖拽对象的样式*/
        .item {
            padding: 6px;
            background-color: #fdfdfd;
            border: solid 1px #eee;
            margin-bottom: 10px;
            cursor: move;
        } 
        /*选中样式*/
        .chosen {
            border: solid 2px #3089dc !important;
        }
</style>
<script>
//导入draggable组件
import draggable from 'vuedraggable'
export default {
  //注册draggable组件
   components: {
            draggable,
        },
   data() {
    return { 
      drag:false,
      //定义要被拖拽对象的数组
      myArray:[
        {people:'cn',id:1,name:'www.itxst.com'},
        {people:'cn',id:2,name:'www.baidu.com'},
        {people:'cn',id:3,name:'www.taobao.com'},
        {people:'us',id:4,name:'www.google.com'}
        ] 
    };
  },
  methods: {
     //开始拖拽事件
      onStart(){
        this.drag=true;
      },
      //拖拽结束事件
       onEnd() {
       this.drag=false;
    },
  },
};
</script>

在vue3.0中的应用

<template>
  <div class="itxst">
    <div>
      <draggable
        :list="state.list"
        ghost-class="ghost"
        chosen-class="chosenClass"
        animation="300"
        @start="onStart"
        @end="onEnd"
      >
        <template #item="{ element }">
          <div class="item">
            {{ element.name }}
          </div>
        </template>
      </draggable>
    </div>
    <div>{{ state.list }}</div>
  </div>
</template>
<script setup>
import { ref, reactive } from "vue";
import draggable from "vuedraggable";
/*
draggable 对CSS样式没有什么要求万物皆可拖拽
:list="state.list"         //需要绑定的数组
ghost-class="ghost"        //被替换元素的样式
chosen-class="chosenClass" //选中元素的样式
animation="300"            //动画效果
@start="onStart"           //拖拽开始的事件
@end="onEnd"               //拖拽结束的事件
*/
const state = reactive({
  //需要拖拽的数据，拖拽后数据的顺序也会变化
  list: [
    { name: "www.itxst.com", id: 0 },
    { name: "www.baidu.com", id: 1 },
    { name: "www.google.com", id: 2 },
  ],
});

//拖拽开始的事件
const onStart = () => {
  console.log("开始拖拽");
};

//拖拽结束的事件
const onEnd = () => {
  console.log("结束拖拽");
};
</script>
<style scoped>
.itxst {
  width: 600px;
  display: flex;
}
.itxst > div:nth-of-type(1) {
  flex: 1;
}
.itxst > div:nth-of-type(2) {
  width: 270px;
  padding-left: 20px;
}
.item {
  border: solid 1px #eee;
  padding: 6px 10px;
  text-align: left;
}

.item:hover {
  cursor: move;
}
.item + .item {
  margin-top: 10px;
}
.ghost {
  border: solid 1px rgb(19, 41, 239);
}
.chosenClass {
  background-color: #f1f1f1;
}
</style>