Introduction: There are many plugins and methods to implement drag-and-drop sorting function in the market at present. In this section, only one of them is described: the transition-group method of CSS3

Effect:

1. Used 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>
Copy the code
2. Define data in data
    import { APi } from '@/api/enterpriseAPi'
    <script>
        export default {
            data() {
                return {
                    oldData: [],
                    newData: [],
                    customApps: [],
                    dragStartId: '',
                    dragEndId: ''
                }
            }
        }
    </script>
    
Copy the code
3
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.splice (oldIndex, 1) // Add a new DOM node newitems.splice (newIndex, 0, This.olddata) // At the end of each drag, the DOM view will be updated by dragging the finished data, assigning the original array, This.customapps = newItems // Call the interface after each drag to save data Api(this.dragSTARtid, this.dragenDid). Then ((res) => {})}},Copy the code
  1. Drag and drop to complete the animation style:
    <style lang="scss" scoped>
        .sort-move {
            transition: transform 1s;
        }
    </style>
Copy the code

end…