Vueは画像のドラッグと並べ替えを実装します

 <ul class="ドラッグコンテナ" 
            @dragstart="onDragStart"
            @dragover="ドラッグオーバー時"
            @dragend="onDragEnd"
            ref="画像リスト">
            <li 
            v-for="(item,idx) リスト内" 
            :key='アイテム.パス'
            クラス="ドラッグリスト" 
            ドラッグ可能="true" 
            >
                <img :src="item.path" alt="" />
            </li>
</ul>

onDragStart(イベント){
            console.log("開始");
            this.draging = イベントターゲット;
        },

onDragOver(イベント){
            console.log('ドラッグ移動')
            イベントをデフォルトにしない();
            ターゲットをevent.targetとします。
                //ドラッグオーバーはulで発生するため、liであるかどうかを判断する必要があります
            if (target.nodeName === "LI" && 
                target.childNodes[0].src !== this.draging.childNodes[0].src) {
                idx_drag = this._index(this.dragging) とします。
                idx_target = this._index(target) とします。
                _list = this.list とします
                _drag = this.list[idx_drag]とします。
                idx_drag>idx_target の場合{
                    _list.splice(idx_target,0,_list[idx_drag]);
                    _list.splice(idx_drag+1,1)
                }それ以外{
                    _list.splice(idx_target+1,0,_list[idx_drag]);
                    _list.splice(idx_drag,1)
                }
                コンソール.log(_list[0].パス)
                this.$emit("change", _list)
            }
        },

<テンプレート>
    <div class="image-list" v-if="リスト && リスト.長さ">
        <ul class="ドラッグコンテナ" 
        @dragstart="onDragStart"
        @dragover="ドラッグオーバー時"
        @dragend="onDragEnd"
        ref="画像リスト">
            <li 
            v-for="(item,idx) リスト内" 
            :key='アイテム.パス'
            クラス="ドラッグリスト" 
            ドラッグ可能="true" 
            >
                <img :src="item.path" alt="" />
            </li>
        </ul>
    </div>
</テンプレート>
<スクリプト>
エクスポートデフォルト{
    名前:"ドラッグ画像リスト",
    小道具:{
        リスト: 配列、
    },
    データ（）{
        戻る {
            dragging:null, //ドラッグされているオブジェクト}
    },
    方法:{
        onDragStart(イベント){
            console.log("開始");
            this.draging = イベントターゲット;
        },   
        onDragOver(イベント){
            console.log('ドラッグ移動')
            イベントをデフォルトにしない();
            ターゲットをevent.targetとします。
                //ドラッグオーバーはulで発生するため、liであるかどうかを判断する必要があります
            target.nodeName === "LI" && target.childNodes[0].src !== this.draging.childNodes[0].src) {
                idx_drag = this._index(this.dragging) とします。
                idx_target = this._index(target) とします。
                _list = this.list とします
                _drag = this.list[idx_drag]とします。
                idx_drag>idx_target の場合{
                    _list.splice(idx_target,0,_list[idx_drag]);
                    _list.splice(idx_drag+1,1)
                }それ以外{
                    _list.splice(idx_target+1,0,_list[idx_drag]);
                    _list.splice(idx_drag,1)
                }
                コンソール.log(_list[0].パス)
            }
        },
        onDragEnd(イベント){
            console.log('イベント終了')
        },
        _index(el){
            var インデックス = 0;
            if (!el || !el.parentNode) {
                -1 を返します。
            }
            (el && (el = el.previousElementSibling)) の間 {
                インデックス++;
            }
            インデックスを返します。
        },
    }
}
</スクリプト>