Detaillierte Erklärung zur Verwendung von Vue Smooth DnD, einer verschiebbaren Komponente von Vue

<Vorlage>
    <div>
        <div Klasse="einfache-Seite">
            <Behälter @drop="onDrop">
                <Ziehbar v-for="Artikel in Artikeln" :key="artikel.id">
                    <div Klasse="ziehbares Element">
                        {{item.data}}
                    </div>
                </Ziehbar>
            </Container>
        </div>
    </div>
</Vorlage>

<Skript>
    importiere { Container, ziehbar } aus „vue-smooth-dnd“;

    const applyDrag = (arr, dragResult) => {
        const { entfernterIndex, hinzugefügterIndex, Nutzlast } = dragResult
        console.log(entfernterIndex, hinzugefügterIndex, Nutzlast)
        wenn (entfernterIndex === null und hinzugefügterIndex === null) return arr

        const Ergebnis = [...arr]
        let itemToAdd = Nutzlast

        wenn (entfernterIndex !== null) {
            ZuHinzufügendes Element = Ergebnis.splice(entfernterIndex, 1)[0]
        }

        wenn (addedIndex !== null) {
            Ergebnis.splice(hinzugefügterIndex, 0, hinzuzufügendes Element)
        }

        Ergebnis zurückgeben
    }

    const generateItems = (Anzahl, Ersteller) => {
        const Ergebnis = []
        für (sei i = 0; i < Anzahl; i++) {
            Ergebnis.push(Ersteller(i))
        }
        Ergebnis zurückgeben
    }

    Standard exportieren {
        Name: "Einfach",
        Komponenten: { Container, Draggable },
        Daten() {
            zurückkehren {
                Elemente: generateItems(50, i => ({ id: i, data: "Draggable " + i }))
            };
        },
        Methoden: {
            beim Ablegen(dropResult) {
                diese.items = applyDrag(diese.items, dropResult);
            }
        }
    };

</Skript>

<Stil>
    .ziehbares Element {
        Höhe: 50px;
        Zeilenhöhe: 50px;
        Textausrichtung: zentriert;
        Anzeige: Block;
        Hintergrundfarbe: #fff;
        Umriss: 0;
        Rand: 1px durchgezogen rgba(0, 0, 0, .125);
        Rand unten: 2px;
        Rand oben: 2px;
        Cursor: Standard;
        Benutzerauswahl: keine;
    }
</Stil>

<Container #Andere Eigenschaften weglassen...
        :animation-duration="1000" # Animationsverzögerung nach dem Platzieren des Elements drag-class="card-ghost"         
        Drop-Klasse = "Kartengeist-Drop"
        :drop-Platzhalter="{
            className: 'drop-preview', # Platzhalterstil animationDuration: '1000', # Platzhalteranimationsverzögerung showOnTop: true # Gibt an, ob über anderen Elementen angezeigt werden soll. Wenn auf false gesetzt, wird es von anderen Drag-Elementen verdeckt.}"
>
    <!-- Einige verschiebbare Elemente-->
    <Ziehbar>….</Ziehbar>
</Container>

.Kartengeist {
    Übergang: Transformation 0,18 s einfach;
    transformieren: drehenZ(35 Grad);
    Hintergrund: rot !wichtig;
}
.Karte-Geister-Drop {
    Übergang: Transformiere 1s kubisch-bezier(0,1,43, 0,62,1,56);
    transformieren: drehenZ(0 Grad);
    Hintergrund: grün !wichtig;
}
.drop-vorschau {
    Rand: 1px gestrichelt #abc;
    Rand: 5px;
    Hintergrund: gelb !wichtig;
}

Mausaufrufe Callback / Event Parameter Hinweise

nach unten o Erster Klick

verschieben o Anfängliches Ziehen
       |
       | get-child-payload() index Die Funktion sollte die Nutzlast zurückgeben
       |
       | 3 x should-accept-drop() srcOptions, payload Ausgelöst für alle Container
       |
       | 3 x drag-start dragResult wird für alle Container ausgelöst
       |
       | Ziehen-Eingabe
       gegen

verschieben o Über Container ziehen
       |
       | nx drag-leave Wird als verschiebbarer Blättercontainer ausgelöst
       | nx drag-enter Wird ausgelöst, wenn das verschiebbare Objekt den Container betritt
       gegen

nach oben o Fertig ziehen

                 should-animate-drop() srcOptions, payload Wird einmal für gelöschte Container ausgelöst

           3 x drag-end dragResult Ausgelöst für alle Container

           nx drop dropResult Wird nur für Droppable-Container ausgelöst

DragResult: {
    payload, # Die Nutzlast kann als das gezogene Objekt verstanden werden isSource, # Ist es der gezogene Container selbst willAcceptDrop, # Kann es gelöscht werden? }

dropResult: {
    addedIndex, # Der Index des neu hinzugefügten Elements, das platziert werden soll, oder null, wenn es keinen gibt
    removedIndex, # Der Index des zu entfernenden Elements oder null, wenn keiner vorhanden ist
    payload, # Das gezogene Elementobjekt, das durch getChildPayload angegeben werden kann droppedElement, # Das platzierte DOM-Element}

<Vorlage>
    <div Klasse="Kartenszene">
        <Behälter
                Ausrichtung="horizontal"
                @drop="onColumnDrop($Ereignis)"
                Ziehgriff-Auswahl = ".column-drag-handle"
        >
            <Ziehbar v-for="Spalte in TaskColumnList" :key="Spaltenname">
                <div Klasse="Kartencontainer">
                    <div Klasse="Kartenspaltenkopfzeile">
                        <span class="column-drag-handle">&#x2630;</span>
                        {{ spaltenname }}
                    </div>
                    <Behälter
                            Gruppenname="Spalte"
                            @drop="(e) => onCardDrop(spalten.id, e)"
                            :get-child-payload="getCardPayload(spalte.id)"
                            Drag-Klasse = "Kartengeist"
                            Drop-Klasse = "Kartengeist-Drop"
                            :drop-placeholder="Platzhalteroptionen ablegen"
                            Klasse = "ziehbarer Container"
                    >
                        <Ziehbares v-for="Aufgabe in Spalte.Liste" :key="Aufgabe.id">
                            <div Klasse="Aufgabenkarte">
                                <div Klasse="Aufgabentitel">{{ Aufgabenname }}</div>
                                <div Klasse = "task-priority" :style = "{ Hintergrund: priorityMap[task.priority].color }">
                                    {{ PrioritätMap[Aufgabe.Priorität].label }}
                                </div>
                            </div>
                        </Ziehbar>
                    </Container>
                </div>
            </Ziehbar>
        </Container>
    </div>
</Vorlage>

<Skript>
    importiere { Container, ziehbar } aus „vue-smooth-dnd“;

    const applyDrag = (arr, dragResult) => {
        const { entfernterIndex, hinzugefügterIndex, Nutzlast } = dragResult
        console.log(entfernterIndex, hinzugefügterIndex, Nutzlast)
        wenn (entfernterIndex === null und hinzugefügterIndex === null) return arr

        const Ergebnis = [...arr]
        let itemToAdd = Nutzlast

        wenn (entfernterIndex !== null) {
            ZuHinzufügendes Element = Ergebnis.splice(entfernterIndex, 1)[0]
        }

        wenn (addedIndex !== null) {
            Ergebnis.splice(hinzugefügterIndex, 0, hinzuzufügendes Element)
        }

        Ergebnis zurückgeben
    }

    const taskList = [
        {
            Name: 'Homepage',
            Priorität: 'P1',
            Status: 'In Entwicklung',
            ID: 1,
        },
        {
            Name: 'Flowchart-Entwicklung',
            Priorität: 'P3',
            Status: „Überprüfung ausstehend“,
            ID: 2,
        },
        {
            Name: 'Statistische Diagrammanzeige',
            Priorität: 'P0',
            Status: 'In Entwicklung',
            ID: 3,
        },
        {
            Name: 'Dateiverwaltung',
            Priorität: 'P1',
            Status: „In Entwicklung“,
            ID: 4,
        }
    ]

    const statusList = ['steht zur Überprüfung an', 'steht zur Entwicklung an', 'wird entwickelt', 'abgeschlossen']

    const taskColumnList = statusList.map((status, index) => {
        zurückkehren {
            Name: Status,
            Liste: Taskliste.Filter(Element => Element.Status === Status),
            ID: Index
        }
    })

    const PrioritätMap = {
        'P0': {
            Label: "Höchste Qualität",
            Farbe: '#ff5454',
        },
        'P1': {
            Etikett: „Hohe Qualität“,
            Farbe: '#ff9a00',
        },
        'P2': {
            Bezeichnung: 'Mittel',
            Farbe: '#ffd139',
        },
        'P3': {
            Bezeichnung: 'niedriger',
            Farbe: '#1ac7b5',
        },
    }

    Standard exportieren {
        Name: 'Karten',
        Komponenten: {Container, Draggable},
        Daten () {
            zurückkehren {
                Aufgabenspaltenliste,
                Prioritätskarte,
                Platzhalteroptionen löschen: {
                    Klassenname: "Drop-Preview",
                    Animationsdauer: '150',
                    showOnTop: wahr
                }
            }
        },
        Methoden: {
            beiSpaltenabfall (dropResult) {
                this.taskColumnList = draggen(this.taskColumnList, dropResult)
            },
            onCardDrop (Spalten-Id, Drop-Ergebnis) {
                let { entfernterIndex, hinzugefügterIndex, Nutzlast } = dropResult
                wenn (entfernterIndex !== null || hinzugefügterIndex !== null) {
                    const Spalte = TaskColumnList.find(p => p.id === Spalten-Id)
                    if (addedIndex !== null && payload) { // Aufgabenstatus aktualisieren dropResult.payload = {
                            ...Nutzlast,
                            Status: Spaltenname,
                        }
                    }
                    Spalte.Liste = applyDrag(Spalte.Liste, dropResult)
                }
            },
            getCardPayload (Spalten-ID) {
                Rückgabeindex =>
                    diese.taskColumnList.find(p => p.id === columnId).list[index]
            },
        }
    }
</Skript>


<Stil>
    * {
        Rand: 0;
        Polsterung: 0;
        Schriftfamilie: „Microsoft YaHei“, „PingFang SC“, „Helvetica Neue“, Helvetica, serifenlos;
        Zeilenhöhe: 1,45;
        Farbe: rgba(0,0,0,.65);
    }
    .Kartenszene {
        Benutzerauswahl: keine;
        Anzeige: Flex;
        Höhe: 100%;
        Rand: 20px;
    }
    .Kartencontainer {
        Anzeige: Flex;
        Flex-Richtung: Spalte;
        Breite: 260px;
        Mindestbreite: 260px;
        Rahmenradius: 12px;
        Hintergrundfarbe: #edeff2;
        Rand rechts: 16px;
        Höhe: berechnet (100vh – 40px);
    }
    .Kartenspaltenkopfzeile {
        Anzeige: Flex;
        Höhe: 50px;
        Rand: 0 16px;
        Elemente ausrichten: zentrieren;
        Flex-Schrumpfen: 0;
        Schriftstärke: 500;
        Schriftgröße: 16px;
    }
    .ziehbarer-Container {
        Flex-Wachstum: 1;
        Überlauf: automatisch;
    }
    .Spaltenziehgriff {
        Cursor: bewegen;
        Polsterung: 5px;
    }
    .Aufgabenkarte {
        Rand: 10px;
        Hintergrundfarbe: weiß;
        Polsterung: 15px 10px;
        Rahmenradius: 8px;
        Kastenschatten: 0 1px 2px 0 rgba (0, 0, 0, 0,12);
        Cursor: Zeiger;
        Anzeige: Flex;
        Inhalt ausrichten: Abstand dazwischen;
    }
    .Aufgabentitel {
        Farbe: #333333;
        Schriftgröße: 14px;
    }
    .Aufgabenpriorität {
        Breite: 60px;
        Zeilenhöhe: 20px;
        Rahmenradius: 12px;
        Textausrichtung: zentriert;
        Farbe: #fff;
        Schriftgröße: 12px;
    }
    .Kartengeist {
        Übergang: Transformation 0,18 s einfach;
        transformieren: drehenZ(5 Grad)
    }

    .Karte-Geister-Drop {
        Übergang: Transformation 0,18 s, leichtes Ein- und Aussteigen;
        transformieren: drehenZ(0 Grad)
    }

    .drop-vorschau {
        Hintergrundfarbe: rgba(150, 150, 200, 0,1);
        Rand: 1px gestrichelt #abc;
        Rand: 5px;
    }
</Stil>