How Vue3 uses vue.draggable.next to complete the drag and drop function

Environment: Vue3 + setup syntax

Chinese document: vue.draggable.next group group drag – itxst.com

Official website: GitHub – SortableJS/vue.draggable.next: Vue 3 compatible drag-and-drop component based on Sortable.js

1. Download dependencies

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

2. Properties

Attribute name	Description
group	If a page has multiple drag areas, dragging between multiple areas can be achieved by setting the group name. Or { name: “…”, pull: [true, false, ‘clone’, array, function], put: [true, false, array, function] }
sort	Whether to enable sorting, if set to false, the group it belongs to cannot be sorted
delay	How many seconds after the mouse is pressed to drag the element
touchStartThreshold	How many px the mouse needs to move to drag the element	td>
disabled	:disabled= “true”, whether to enable dragging Drag component
animation	Animation effect when dragging , for example, setting animation=1000 means 1 second transition animation effect
handle	:handle=”.mover” The drag event can only be triggered when the mouse is on an element with class mover
filter	:filter=”.unmover” Elements with the unmover style set are not allowed to be dragged
draggable	:draggable=”.item” Only elements with style class item can be dragged
ghost-class	:ghost-class=”ghostClass” Set drag The placeholder class name of the element. Your custom style may need to add !important to take effect, and set the forceFallback attribute to true
chosen-class	:ghost-class=”hostClass” The style of the selected target. Your custom style may need to add !important to take effect, and set the forceFallback attribute to true
drag-class	:drag-class=”dragClass”Drag The style of the element. Your custom style may need to add !important to take effect, and set the forceFallback attribute to true
force-fallback	The default is false, ignoring the drag and drop behavior of HTML5, because h5 There is an attribute in it that can also be dragged. When you want to customize the ghostClass chosenClass dragClass style, it is recommended to set forceFallback to true
fallback-class	Default false, clone the style of the selected element to the one that follows the mouse Style
fallback-on-body	Default false, cloned elements are added to the body of the document
fallback-tolerance	How many pixels to move when the mouse is pressed To drag the element, :fallback-tolerance=”8″
scroll	Default true, whether dragging is allowed in the scroll area
scroll-fn	Scroll Callback function
scroll-fensitivity	How far away from the scroll area is the scroll bar
scroll-speed	Scroll speed

3. Confirm your needs. I will use group drag and drop as an example

<template>
    <div class="msg">{<!-- -->{ state.message }}</div>
    <div class="itxst">
        <div class="group">
            <draggable :list="state.modules.arr1" ghost-class="ghost" handle=".move" filter=".forbid" :force-fallback="true"
                chosen-class="chosenClass" animation="300" @start="onStart" @end="onEnd" :group="state.groupA"
                :fallback-class="true" :fallback-on-body="true" :touch-start-threshold="50" :fallback-tolerance="50"
                :move="onMove" :sort="false">
                <template #item="{ element }">
                    <div class="item move">
                        <label class="move">{<!-- -->{ element.name }}</label>
                        <span v-html="element.name == 'Message' ? 'www.itxst.com' : 'Content....'"></span>
                    </div>
                </template>
            </draggable>
        </div>
        <div class="group">
            <draggable class="Bzu" :list="state.modules.arr2" ghost-class="ghost" handle=".move" filter=".forbid"
                :force-fallback="true" chosen-class="chosenClass" animation="300" @start="onStart" @end="onEnd"
                group="itxst" :fallback-class="true" :fallback-on-body="true" :touch-start-threshold="50"
                :fallback-tolerance="50" :move="onMove">
                <template #item="{ element }">
                    <div class="item move">
                        <label class="move">{<!-- -->{ element.name }}</label>
                        <span>Content....</span>
                    </div>
                </template>
            </draggable>
        </div>
    </div>
</template>
<script setup>
import { reactive } from "vue";
//Import draggable component
import draggable from "vuedraggable";

const state = reactive({
    message: "drag",
    groupA: {
        name: "itxst",
        put: false, //Allow dragging in
        pull: "clone"
    },
    modules: {
        arr1: [
            { name: "Group A", id: 1 },
            { name: "Inventory", id: 2 },
            { name: "Sales", id: 3 },
            { name: "Log", id: 4 },
            { name: "Employee", id: 6 },
            { name: "Report", id: 7 },
        ],
        arr2: [
            { name: "Group B", id: 5 },

        ],
    },
});

//The drag start event
const onStart = () => {
    console.log("Start dragging");
};

//The drag-and-drop end event
const onEnd = () => {
    console.log("End dragging");
};

const onMove = (e) => {
    //Docking is not allowed
    if (e.relatedContext.element.disabledPark == true) return false;

    return true;
};
</script>
<style>
body {
    padding: 0px;
    margin: 0px;
    background-color: #f1f1f1;
}

.msg {
    padding: 10px 20px 0px 20px;
}

.itxst {
    background-color: #f1f1f1;
    display: flex;
    padding: 20px;
}

.group {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-content: center;
    width: 32%;
    margin-right: 20px;
    border: 1px solid red;
    height: 600px;
}

.item {
    border: solid 1px #ddd;
    padding: 0px;
    text-align: left;
    background-color: #fff;
    margin-bottom: 10px;
    display: flex;
    height: 36px;
    user-select: none;
}

.item>label {
    padding: 6px 10px;
    color: #333;
}

.item>label:hover {
    cursor: move;
}

.item>span {
    padding: 6px 10px;
    color: #666;
}

.ghost {
    border: solid 1px rgb(19, 41, 239) !important;
}

.chosenClass {
    opacity: 1;
    border: solid 1px red;
}

.fallbackClass {
    background-color: aquamarine;
}

.Bzu {
    height: 100%;
}
</style>

4. Effect