Vue implementiert die Drag & Drop-Sortierfunktion der Seiten-Div-Box

    <Übergangsgruppe Klasse="Container" Name="Sortieren">
        <div Klasse = "app-item" v-for = "App in benutzerdefinierten Apps" :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 Klasse="Auslassungspunkte" >{{app.name}}</div>
            </div>
        </div>
    </Übergangsgruppe>

    importiere { APi } von '@/api/enterpriseAPi'
    <Skript>
        Standard exportieren {
            Daten() {
                zurückkehren {
                    alteDaten: [],
                    neueDaten: [],
                    benutzerdefinierteApps: [],
                    dragStartId: '',
                    dragEndId: ''
                }
            }
        }
    </Skript>

    dragstart(Wert) {
        this.oldData = Wert
        this.dragStartId = Wert.id
    },
    dragenter(Wert) {
        this.newData = Wert
        this.dragEndId = Wert.id
    },
    getDragend(listData, Typ) {
            wenn (diese.altenDaten !== diese.neuenDaten) {
                let alterIndex = listData.indexOf(diese.altenData)
                let neuerIndex = listData.indexOf(diese.neuenDaten)
                let newItems = [...listData]
                // Den vorherigen DOM-Knoten löschen newItems.splice(oldIndex, 1)
                // Einen neuen DOM-Knoten am Ende des Drag-Ziels hinzufügen newItems.splice(newIndex, 0, this.oldData)
                // Nachdem jeder Drag abgeschlossen ist, werden die durch den Drag verarbeiteten Daten dem ursprünglichen Array zugewiesen, die DOM-Ansicht wird aktualisiert und die Seite zeigt die Drag-Animation an this.customApps = newItems
                // Rufen Sie die Schnittstelle auf, um Daten jedes Mal zu speichern, wenn der Drag endet. Api(this.dragStartId, this.dragEndId).then((res) => {})
            }
        },

    <style lang="scss" scoped>
        .sort-move {
            Übergang: Transformation 1s;
        }
    </Stil>