Vueはページdivボックスのドラッグアンドドロップソート機能を実装します

    <transition-group class="container" name="sort">
        <div class="app-item" v-for="customApps 内のアプリ" :key="app.id" :draggable="true"
            @dragstart="dragstart(アプリ)"
            @dragenter="dragenter(アプリ、$イベント)"
            @dragend="getDragend(customApps, '顧客', $event)">
            <div>
                <img class="icon_a" v-if="app.logo" :src="app.logo" >
                <div class="ellipsis" >{{app.name}}</div>
            </div>
        </div>
    </トランジショングループ>

    '@/api/enterpriseAPi' から { APi } をインポートします。
    <スクリプト>
        エクスポートデフォルト{
            データ（） {
                戻る {
                    古いデータ: [],
                    新しいデータ: [],
                    カスタムアプリ: [],
                    ドラッグ開始ID: ''、
                    ドラッグ終了ID: ''
                }
            }
        }
    </スクリプト>

    ドラッグスタート(値) {
        this.oldData = 値
        this.dragStartId = 値.id
    },
    ドラジェンター(値) {
        this.newData = 値
        this.dragEndId = 値.id
    },
    getDragend(リストデータ、タイプ) {
            (this.oldData !== this.newData) の場合 {
                oldIndex = listData.indexOf(this.oldData) とします。
                newIndex = listData.indexOf(this.newData) とします。
                newItems = [...listData] とします
                // 前のDOMノードを削除します newItems.splice(oldIndex, 1)
                // ドラッグ ターゲットの末尾に新しい DOM ノードを追加します。newItems.splice(newIndex, 0, this.oldData)
                // 各ドラッグが完了すると、ドラッグによって処理されたデータが元の配列に割り当てられ、DOM ビューが更新され、ページにドラッグ アニメーションが表示されます。this.customApps = newItems
                // ドラッグが終了するたびにデータを保存するインターフェースを呼び出します Api(this.dragStartId, this.dragEndId).then((res) => {})
            }
        },

    <style lang="scss" スコープ>
        .sort-move {
            遷移: 1 秒を変換します。
        }
    </スタイル>