Vue implements the drag and drop sorting function of the page div box

vue implements the drag and drop sorting function of the div box on the page. Foreword: There are many plug-ins and methods on the market that implement the drag and drop sorting function. This section will not go into details, but only talk about one method: the transition-group method of css3

Effect picture:

1. Use in DOM:

    <transition-group class="container" name="sort">
        <div class="app-item" v-for="app in customApps" :key="app.id" :draggable="true"
            @dragstart="dragstart(app)"
            @dragenter="dragenter(app,$event)"
            @dragend="getDragend(customApps, 'customer', $event)">
            <div>
                <img class="icon_a" v-if="app.logo" :src="app.logo" >
                <div class="ellipsis" >{{app.name}}</div>
            </div>
        </div>
    </transition-group>

2. Define data in data

    import { APi } from '@/api/enterpriseAPi'
    <script>
        export default {
            data() {
                return {
                    oldData: [],
                    newData: [],
                    customApps: [],
                    dragStartId: '',
                    dragEndId: ''
                }
            }
        }
    </script>

3. Use in methods

    dragstart(value) {
        this.oldData = value
        this.dragStartId = value.id
    },
    dragenter(value) {
        this.newData = value
        this.dragEndId = value.id
    },
    getDragend(listData, type) {
            if (this.oldData !== this.newData) {
                let oldIndex = listData.indexOf(this.oldData)
                let newIndex = listData.indexOf(this.newData)
                let newItems = [...listData]
                // Delete the previous DOM node newItems.splice(oldIndex, 1)
                // Add a new DOM node at the end of the drag target newItems.splice(newIndex, 0, this.oldData)
                // After each drag is completed, the data processed by the drag is assigned to the original array, the DOM view is updated, and the page displays the drag animation this.customApps = newItems
                // Call the interface to save data every time the drag ends Api(this.dragStartId, this.dragEndId).then((res) => {})
            }
        },

Drag completion animation style:

    <style lang="scss" scoped>
        .sort-move {
            transition: transform 1s;
        }
    </style>

This is the end of this article about how to use vue to implement the drag and sort function of div boxes on the page. For more related vue div box drag and sort content, please search for previous articles on 123WORDPRESS.COM or continue to browse the related articles below. I hope you will support 123WORDPRESS.COM in the future!

You may also be interested in:

Vue implements the function of dragging and sorting lists
Vue implements selection, dragging and sorting effects based on vuedraggable
vue drag component vuedraggable API options to achieve mutual drag and sorting between boxes
Implementing smooth transition drag and drop sorting function based on Vue
Use Vue-draggable component to implement drag and drop sorting of table contents in Vue project
vue.draggable realizes the drag and drop sorting effect of the table
vuedraggable+element ui realizes the drag and drop sorting effect of page controls
Detailed explanation of how to use vuedraggable, a drag-and-drop sorting plugin for Vue

<<: Comprehensive analysis of optimistic locking, pessimistic locking and MVCC in MySQL

>>: How to use domestic image warehouse for Docker