Vue implementiert das Ziehen und Sortieren von Bildern

 <ul Klasse="Container ziehen" 
            @dragstart="beimDragStart"
            @dragover="beimDragOver"
            @dragend="beiDragEnde"
            ref="imgList">
            <li 
            v-for="(Element, IDX) in Liste" 
            :Schlüssel='Element.Pfad'
            Klasse = "Drag-Liste" 
            ziehbar="true" 
            >
                <img :src="item.path" alt="" />
            </li>
</ul>

onDragStart(Ereignis){
            console.log("starten");
            dies.draging = Ereignis.Ziel;
        },

onDragOver(Ereignis){
            console.log('ziehen/verschieben')
            event.preventDefault();
            sei Ziel = Ereignis.Ziel;
                // Da Dragover auf ul auftritt, muss festgestellt werden, ob es sich um li handelt
            wenn (target.nodeName === "LI" und 
                target.childNodes[0].src !== this.draging.childNodes[0].src) {
                lass idx_drag = this._index(this.dragging)
                lass idx_target = this._index(ziel)
                let _list = diese.liste
                let _drag = diese.Liste[idx_drag]
                wenn(idx_drag>idx_target){
                    _list.splice(idx_target,0,_list[idx_drag]);
                    _list.splice(idx_drag+1,1)
                }anders{
                    _list.splice(idx_target+1,0,_list[idx_drag]);
                    _list.splice(idx_drag,1)
                }
                konsole.log(_list[0].Pfad)
                dies.$emit("ändern", _list)
            }
        },

<Vorlage>
    <div Klasse="Bildliste" v-if="Liste && Listenlänge">
        <ul Klasse="Container ziehen" 
        @dragstart="beimDragStart"
        @dragover="beimDragOver"
        @dragend="beiDragEnde"
        ref="imgList">
            <li 
            v-for="(Element, IDX) in Liste" 
            :Schlüssel='Element.Pfad'
            Klasse = "Drag-Liste" 
            ziehbar="true" 
            >
                <img :src="item.path" alt="" />
            </li>
        </ul>
    </div>
</Vorlage>
<Skript>
Standard exportieren {
    Name: „Bildliste ziehen“,
    Requisiten:{
        Liste: Array,
    },
    Daten(){
        zurückkehren {
            dragging:null, //Das Objekt, das gezogen wird}
    },
    Methoden:{
        onDragStart(Ereignis){
            console.log("starten");
            dies.draging = Ereignis.Ziel;
        },   
        onDragOver(Ereignis){
            console.log('ziehen/verschieben')
            event.preventDefault();
            sei Ziel = Ereignis.Ziel;
                // Da Dragover auf ul auftritt, muss festgestellt werden, ob es sich um li handelt
            wenn (target.nodeName === "LI" && target.childNodes[0].src !== this.draging.childNodes[0].src) {
                lass idx_drag = this._index(this.dragging)
                lass idx_target = this._index(ziel)
                let _list = diese.liste
                let _drag = diese.Liste[idx_drag]
                wenn(idx_drag>idx_target){
                    _list.splice(idx_target,0,_list[idx_drag]);
                    _list.splice(idx_drag+1,1)
                }anders{
                    _list.splice(idx_target+1,0,_list[idx_drag]);
                    _list.splice(idx_drag,1)
                }
                konsole.log(_list[0].Pfad)
            }
        },
        onDragEnd(Ereignis){
            console.log('Ereignis beenden')
        },
        _index(el){
            Var-Index = 0;
            wenn (!el || !el.parentNode) {
                Rückgabe -1;
            }
            während (el && (el = el.vorherigesElementGeschwister)) {
                Index++;
            }
            Rückgabeindex;
        },
    }
}
</Skript>