Detailed explanation of the use of Vue Smooth DnD, a draggable component of Vue

Introduction and Demo
API: Container

property
life cycle
Callbacks
event

API: Draggable

Actual Combat

Introduction and Demo

Recently, there is a need for a drag-and-drop list, and I found a simple and easy-to-use Vue draggable component. Amway

Vue Smooth DnD is a fast, lightweight drag-and-drop, sortable Vue.js library that wraps the smooth-dnd library.

Vue Smooth DnD mainly consists of two components, Container and Draggable . Container contains draggable elements or components, and each of its child elements should be wrapped by Draggable . Every element that is to be draggable needs to be wrapped by Draggable .

Installation: npm i vue-smooth-dnd

A simple Demo that shows the basic usage of the component and implements a draggable list.

<template>
    <div>
        <div class="simple-page">
            <Container @drop="onDrop">
                <Draggable v-for="item in items" :key="item.id">
                    <div class="draggable-item">
                        {{item.data}}
                    </div>
                </Draggable>
            </Container>
        </div>
    </div>
</template>

<script>
    import { Container, Draggable } from "vue-smooth-dnd";

    const applyDrag = (arr, dragResult) => {
        const { removedIndex, addedIndex, payload } = dragResult
        console.log(removedIndex, addedIndex, payload)
        if (removedIndex === null && addedIndex === null) return arr

        const result = [...arr]
        let itemToAdd = payload

        if (removedIndex !== null) {
            itemToAdd = result.splice(removedIndex, 1)[0]
        }

        if (addedIndex !== null) {
            result.splice(addedIndex, 0, itemToAdd)
        }

        return result
    }

    const generateItems = (count, creator) => {
        const result = []
        for (let i = 0; i < count; i++) {
            result.push(creator(i))
        }
        return result
    }

    export default {
        name: "Simple",
        components: { Container, Draggable },
        data() {
            return {
                items: generateItems(50, i => ({ id: i, data: "Draggable " + i }))
            };
        },
        methods: {
            onDrop(dropResult) {
                this.items = applyDrag(this.items, dropResult);
            }
        }
    };

</script>

<style>
    .draggable-item {
        height: 50px;
        line-height: 50px;
        text-align: center;
        display: block;
        background-color: #fff;
        outline: 0;
        border: 1px solid rgba(0, 0, 0, .125);
        margin-bottom: 2px;
        margin-top: 2px;
        cursor: default;
        user-select: none;
    }
</style>

Effect

API: Container

property

property	type	default value	describe
:orientation	string	vertical	The orientation of the container, which can be horizontal or vertical
:behaviour	string	move	Description The dragged element is moved or copied to the target container. Can be move or copy or drop-zone or contain . move can move elements between containers, copy can copy elements to other containers, but the elements in the container are immutable, drop-zone can move elements between containers, but the order of elements in the container is fixed. contain can only be moved within the container.
:tag	string, NodeDescription	div	The element tag of the container, the default is div, which can be a string such as tag="table" or an object containing value and props attributes: tag="{value: 'table', props: {class: 'my-table'}}"
:group-name	string	undefined	Draggable elements can be moved between containers with the same group name. If the group name is not set the container will not accept elements from outside. This behavior can be overridden by the shouldAcceptDrop function. see below.
:lock-axis	string	undefined	Locks the axis of movement you are dragging. Possible values are x, y or undefined.
:drag-handle-selector	string	undefined	Used to specify the CSS selector that can enable dragging. If not specified, any position inside the element can be grabbed.
:non-drag-area-selector	string	undefined	CSS selector to disable dragging, takes precedence over dragHandleSelector.
:drag-begin-delay	number	0 (200 for touch devices)	The unit is milliseconds. Indicates how long it takes to click on an element before dragging can begin. Moving the cursor more than 5px before this will cancel the drag.
:animation-duration	number	250	The unit is milliseconds. Indicates the duration of the animation for placing and reordering elements.
:auto-scroll-enabled	boolean	true	If the dragged item gets close to the border, the first scrollable parent will automatically scroll. (I don't understand this attribute = =)
:drag-class	string	undefined	Classes added while the element is being dragged (will not affect the display of the element after the drag ends).
:drop-class	string	undefined	Classes added from the time the dragged element is dropped until it is added to the page.
:remove-on-drop-out	boolean	undefined	If set to true, when the dragged element is not dropped into any relevant container, onDrop() is called with the element index as removedIndex
:drop-placeholder	boolean,object	undefined	Placeholder options. Contains className, animationDuration, showOnTop

Demonstration of the effects of drag-class , drop-class and drop-placeholder.className

<Container #Omit other properties...
        :animation-duration="1000" # Animation delay after placing the element drag-class="card-ghost"         
        drop-class="card-ghost-drop"
        :drop-placeholder="{
            className: 'drop-preview', # Placeholder style animationDuration: '1000', # Placeholder animation delay showOnTop: true # Whether to display on top of other elements. If set to false, it will be covered by other drag elements.}"
>
    <!-- Some draggable elements-->
    <Draggable>....</Draggable>
</Container>

Class corresponding style

.card-ghost {
    transition: transform 0.18s ease;
    transform: rotateZ(35deg);
    background: red !important;
}
.card-ghost-drop {
    transition: transform 1s cubic-bezier(0,1.43,.62,1.56);
    transform: rotateZ(0deg);
    background: green !important;
}
.drop-preview {
    border: 1px dashed #abc;
    margin: 5px;
    background: yellow !important;
}

Actual effect (my excellent color matching)

life cycle

The life cycle of a drag is described and controlled by a series of callbacks and events. The following example contains three containers as an example to illustrate (the document is copied directly without translation. The detailed explanation of the API can be seen later.):

Mouse Calls Callback / Event Parameters Notes

down o Initial click

move o Initial drag
       |
       | get-child-payload() index Function should return payload
       |
       | 3 x should-accept-drop() srcOptions, payload Fired for all containers
       |
       | 3 x drag-start dragResult Fired for all containers
       |
       | drag-enter
       v

move o Drag over containers
       |
       | nx drag-leave Fired as draggable leaves container
       | nx drag-enter Fired as draggable enters container
       v

up o Finish drag

                 should-animate-drop() srcOptions, payload Fires once for dropped container

           3 x drag-end dragResult Fired for all containers

           nx drop dropResult Fired only for droppable containers

Note that should-accept-drop should be triggered before every drag-start and before every drag-end , but has been omitted here for clarity.

The format of dragResult parameter is:

dragResult: {
    payload, # The payload can be understood as the object being dragged isSource, # Is it the container being dragged itself willAcceptDrop, # Can it be dropped? }

The format of dropResult parameter is:

dropResult: {
    addedIndex, # The index of the newly added element to be placed, or null if there is none
    removedIndex, # The index of the element to be removed, or null if none
    payload, # The dragged element object, which can be specified by getChildPayload droppedElement, # The placed DOM element}

Callbacks

Callbacks provide additional logic and checks before and during user interaction.

get-child-payload(index) customizes payload object passed to onDrop() .
should-accept-drop(sourceContainerOptions, payload) is used to determine whether the container can be dropped and will override group-name attribute.
should-animate-drop(sourceContainerOptions, payload) returns false to prevent drop animation.
get-ghost-parent() returns the element to which the ghost element (the element displayed when dragging) should be added. The default is the parent element. In some cases, positioning may cause problems. You can choose to customize it, such as returning document.body .

event

@drag-start Event emitted by all containers when dragging starts. Parameter dragResult .
@drag-end A function called by all containers when dragging ends. Called before a @drop event. Parameter dragResult .
@drag-enter Event to be emitted by the associated container whenever the dragged item enters its bounds while being dragged.
@drag-leave An event to be emitted by the associated container whenever the dragged item leaves its bounds while being dragged.
@drop-ready A function that the dragged container will call when the index of a possible drop position in the container changes. Basically, it is called every time a draggable in the container slides to open up space for the dragged item. Parameter dropResult .
@drop Event emitted by all related containers when placement is complete (after the placement animation is complete). The source container and any containers that can accept a drop are considered related. Parameter dropResult .

API: Draggable

tag

The same tag as the container specifies the DOM element tag of the draggable element.

Actual Combat

Implement a simple team collaboration task manager.

<template>
    <div class="card-scene">
        <Container
                orientation="horizontal"
                @drop="onColumnDrop($event)"
                drag-handle-selector=".column-drag-handle"
        >
            <Draggable v-for="column in taskColumnList" :key="column.name">
                <div class="card-container">
                    <div class="card-column-header">
                        <span class="column-drag-handle">&#x2630;</span>
                        {{ column.name }}
                    </div>
                    <Container
                            group-name="col"
                            @drop="(e) => onCardDrop(column.id, e)"
                            :get-child-payload="getCardPayload(column.id)"
                            drag-class="card-ghost"
                            drop-class="card-ghost-drop"
                            :drop-placeholder="dropPlaceholderOptions"
                            class="draggable-container"
                    >
                        <Draggable v-for="task in column.list" :key="task.id">
                            <div class="task-card">
                                <div class="task-title">{{ task.name }}</div>
                                <div class="task-priority" :style="{ background: priorityMap[task.priority].color }">
                                    {{ priorityMap[task.priority].label }}
                                </div>
                            </div>
                        </Draggable>
                    </Container>
                </div>
            </Draggable>
        </Container>
    </div>
</template>

<script>
    import { Container, Draggable } from "vue-smooth-dnd";

    const applyDrag = (arr, dragResult) => {
        const { removedIndex, addedIndex, payload } = dragResult
        console.log(removedIndex, addedIndex, payload)
        if (removedIndex === null && addedIndex === null) return arr

        const result = [...arr]
        let itemToAdd = payload

        if (removedIndex !== null) {
            itemToAdd = result.splice(removedIndex, 1)[0]
        }

        if (addedIndex !== null) {
            result.splice(addedIndex, 0, itemToAdd)
        }

        return result
    }

    const taskList = [
        {
            name: 'Homepage',
            priority: 'P1',
            status: 'Under development',
            id: 1,
        },
        {
            name: 'Flowchart Development',
            priority: 'P3',
            status: 'pending review',
            id: 2,
        },
        {
            name: 'Statistical chart display',
            priority: 'P0',
            status: 'Under development',
            id: 3,
        },
        {
            name: 'File Management',
            priority: 'P1',
            status: 'Under development',
            id: 4,
        }
    ]

    const statusList = ['pending review', 'pending development', 'under development', 'completed']

    const taskColumnList = statusList.map((status, index) => {
        return {
            name: status,
            list: taskList.filter(item => item.status === status),
            id: index
        }
    })

    const priorityMap = {
        'P0': {
            label: 'highest quality',
            color: '#ff5454',
        },
        'P1': {
            label: 'High quality',
            color: '#ff9a00',
        },
        'P2': {
            label: 'Medium',
            color: '#ffd139',
        },
        'P3': {
            label: 'lower',
            color: '#1ac7b5',
        },
    }

    export default {
        name: 'Cards',
        components: {Container, Draggable},
        data () {
            return {
                taskColumnList,
                priorityMap,
                dropPlaceholderOptions: {
                    className: 'drop-preview',
                    animationDuration: '150',
                    showOnTop: true
                }
            }
        },
        methods: {
            onColumnDrop (dropResult) {
                this.taskColumnList = applyDrag(this.taskColumnList, dropResult)
            },
            onCardDrop (columnId, dropResult) {
                let { removedIndex, addedIndex, payload } = dropResult
                if (removedIndex !== null || addedIndex !== null) {
                    const column = taskColumnList.find(p => p.id === columnId)
                    if (addedIndex !== null && payload) { // Update task status dropResult.payload = {
                            ...payload,
                            status: column.name,
                        }
                    }
                    column.list = applyDrag(column.list, dropResult)
                }
            },
            getCardPayload (columnId) {
                return index =>
                    this.taskColumnList.find(p => p.id === columnId).list[index]
            },
        }
    }
</script>


<style>
    * {
        margin: 0;
        padding: 0;
        font-family: 'Microsoft YaHei', 'PingFang SC', 'Helvetica Neue', Helvetica, sans-serif;
        line-height: 1.45;
        color: rgba(0,0,0,.65);
    }
    .card-scene {
        user-select: none;
        display: flex;
        height: 100%;
        margin: 20px;
    }
    .card-container {
        display: flex;
        flex-direction: column;
        width: 260px;
        min-width: 260px;
        border-radius: 12px;
        background-color: #edeff2;
        margin-right: 16px;
        height: calc(100vh - 40px);
    }
    .card-column-header {
        display: flex;
        height: 50px;
        margin: 0 16px;
        align-items: center;
        flex-shrink: 0;
        font-weight: 500;
        font-size: 16px;
    }
    .draggable-container {
        flex-grow: 1;
        overflow:auto;
    }
    .column-drag-handle {
        cursor: move;
        padding: 5px;
    }
    .task-card {
        margin: 10px;
        background-color: white;
        padding: 15px 10px;
        border-radius: 8px;
        box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.12);
        cursor: pointer;
        display: flex;
        justify-content: space-between;
    }
    .task-title {
        color: #333333;
        font-size: 14px;
    }
    .task-priority {
        width: 60px;
        line-height: 20px;
        border-radius: 12px;
        text-align: center;
        color: #fff;
        font-size: 12px;
    }
    .card-ghost {
        transition: transform 0.18s ease;
        transform: rotateZ(5deg)
    }

    .card-ghost-drop {
        transition: transform 0.18s ease-in-out;
        transform: rotateZ(0deg)
    }

    .drop-preview {
        background-color: rgba(150, 150, 200, 0.1);
        border: 1px dashed #abc;
        margin: 5px;
    }
</style>

Effect

This is the end of this article about the detailed usage of Vue Smooth DnD, a draggable component of Vue. For more related Vue draggable component content, please search for previous articles on 123WORDPRESS.COM or continue to browse the following related articles. I hope you will support 123WORDPRESS.COM in the future!

You may also be interested in:

vue drag component vuedraggable API options to achieve mutual drag and sorting between boxes
Vue drag component list to realize dynamic page configuration function
Detailed explanation of how to use the Vue drag component
Detailed explanation of Vue drag component development example
Vue implements the requirement of dragging and dropping dynamically generated components
Vue uses Split to encapsulate the universal drag and slide partition panel component
Vue develops drag progress bar sliding component
vue draggable resizable realizes the component function of draggable scaling
Use Vue-draggable component to implement drag and drop sorting of table contents in Vue project
Vue component Draggable implements drag function
How to implement draggable components in Vue

<<: MySQL 8.0.15 version installation tutorial connect to Navicat.list

>>: How to modify the group to which a user belongs in Linux