vue.draggable.next 中文文档

vue.draggable.next 是一款vue3的拖拽插件,是vue.draggable升级版本，同样是基于Sortable.js实现的，你可以用它来拖拽列表、菜单、工作台、选项卡等常见的工作场景，本人在工作台和多选项卡环境下实践过，比自己实现的拖拽效果优雅多了，使用的方法也非常简单但和vue2版本的用法有一些vue语法上的区别，本文档将会列举全部的属性和事件。

官方网站

https://github.com/SortableJS/vue.draggable.next

非VUE版

非VUE版请访问: sortable.js
VUE2版请访问: vuedraggable

文件下载

下载vuedraggablenext文件

下载sortable文件

下载vue3文件

包安装方式

yarn add vuedraggable@next
npm i -S vuedraggable@next

UMD浏览器引用JS方式

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

属性说明

如果下面的属性说明未能完全看明，可以看左边的对应的菜单查看详细说明和例子。

属性名称	说明
group	如果一个页面有多个拖拽区域，通过设置group名称可以实现多个区域之间相互拖拽或者 { name: "...", pull: [true, false, 'clone', array , function], put: [true, false, array , function] }
sort	是否开启排序,如果设置为false,它所在组无法排序
delay	鼠标按下多少秒之后可以拖拽元素
touchStartThreshold	鼠标按下移动多少px才能拖动元素
disabled	:disabled= "true",是否启用拖拽组件
animation	拖动时的动画效果，如设置animation=1000表示1秒过渡动画效果
handle	:handle=".mover" 只有当鼠标在class为mover类的元素上才能触发拖到事件
filter	:filter=".unmover" 设置了unmover样式的元素不允许拖动
draggable	:draggable=".item" 样式类为item的元素才能被拖动
ghost-class	:ghost-class="ghostClass" 设置拖动元素的占位符类名,你的自定义样式可能需要加!important才能生效，并把forceFallback属性设置成true
chosen-class	:ghost-class="hostClass" 被选中目标的样式，你的自定义样式可能需要加!important才能生效，并把forceFallback属性设置成true
drag-class	:drag-class="dragClass"拖动元素的样式，你的自定义样式可能需要加!important才能生效，并把forceFallback属性设置成true
force-fallback	默认false，忽略HTML5的拖拽行为，因为h5里有个属性也是可以拖动，你要自定义ghostClass chosenClass dragClass样式时，建议forceFallback设置为true
fallback-class	默认false，克隆选中元素的样式到跟随鼠标的样式
fallback-on-body	默认false，克隆的元素添加到文档的body中
fallback-tolerance	按下鼠标移动多少个像素才能拖动元素，:fallback-tolerance="8"
scroll	默认true,有滚动区域是否允许拖拽
scroll-fn	滚动回调函数
scroll-fensitivity	距离滚动区域多远时，滚动滚动条
scroll-speed	滚动速度

完整例子

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

在线试一试

浏览器umd开发模式

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>vue.draggable vue3例子</title>
    <meta name="viewport"
        content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no, minimal-ui">
    <script src="https://www.itxst.com/package/vue3/vue.global.js"></script>
    <script src="https://www.itxst.com/package/sortable/Sortable.min.js"></script>
    <script src="https://www.itxst.com/package/vuedraggablenext/vuedraggable.umd.min.js"></script>
</head>
<body style="padding:10px;">
    <div id="app" class="demo">
        <draggable :list="list" ghost-class="ghost" :force-fallback="true" chosen-class="chosenClass" animation="300"
            @start="onStart" @end="onEnd">
            <template #item="{ element }">
                <div class="item">
                    {{ element.name }}
                </div>
            </template>
        </draggable>
    </div>
    <script>
        const app = {
            data() {
                return {
                    //需要拖拽的数据
                    list: [
                        { name: "www.itxst.com", id: 0 },
                        { name: "www.baidu.com", id: 1 },
                        { name: "www.google.com", id: 2 },
                    ]
                }
            },
            //注册draggable组件
            components: {
                'draggable': window.vuedraggable
            },
            methods: {
                //开始拖拽事件
                onStart() {

                },
                //结束拖拽事件
                onEnd() {

                }
            }
        }
        Vue.createApp(app).mount('#app')
    </script>
       <style>
        .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) !important;
        }

        .chosenClass {
            background-color: #eee;
            opacity: 1;
            border: solid 1px red;
        }
        .fallbackClass {
            background-color: aquamarine;
        }
    </style>
</body>
</html>