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

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

vue は、ページ上の div ボックスのドラッグ アンド ドロップ ソート機能を実装します。 序文: ドラッグ アンド ドロップ ソート機能を実装するプラグインやメソッドは市場に数多くあります。 このセクションでは詳細には触れず、1 つのメソッド、つまり CSS3 の transition-group メソッドについてのみ説明します。

効果画像:

1. DOMでの使用:

    <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>
    </トランジショングループ>

2. データ内のデータを定義する

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

3. メソッド内での使用

    ドラッグスタート(値) {
        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 秒を変換します。
        }
    </スタイル>

これで、vue を使用してページ上の div ボックスのドラッグ アンド ソート機能を実装する方法についての記事は終了です。vue div ボックスのドラッグ アンド ソートに関するその他の関連コンテンツについては、123WORDPRESS.COM で以前の記事を検索するか、以下の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。

以下もご興味があるかもしれません:
  • Vueはリストのドラッグとソートの機能を実装します
  • Vueはvuedraggableに基づいて選択、ドラッグ、ソート効果を実装します
  • vue ドラッグ コンポーネント vuedraggable API オプションは、ボックス間の相互ドラッグと並べ替えを実現します。
  • Vue をベースにスムーズな遷移のドラッグ アンド ドロップ ソート機能を実装する
  • Vue ドラッグ可能なコンポーネントを使用して、Vue プロジェクトでテーブル コンテンツのドラッグ アンド ドロップによる並べ替えを実装します。
  • vue.draggableはテーブルのドラッグアンドドロップソート効果を実現します
  • vuedraggable+element uiは、ページコントロールのドラッグアンドドロップソート効果を実現します。
  • Vueのドラッグアンドドロップソートプラグインvuedraggableの使い方を詳しく説明します

<<:  css input[type=file] スタイルの美化 (入力アップロードファイルスタイル)

>>:  MySQL における楽観的ロック、悲観的ロック、MVCC の包括的な分析

推薦する

Win10 への MySQL 5.7 のインストール MSI 版のチュートリアル(画像とテキスト付き)

主にインストール後に my.ini ファイルを確認するために、msi 形式でインストールしました。フ...

MySQL のフィールドにデフォルトの時間を追加する方法

日付型の違いと用途MySQL には、日付、時刻、年、日付時刻、タイムスタンプの 5 つの日付タイプが...

MySQL 制約の超詳細な説明

目次MySQL 制約操作1. 非ヌル制約2. ユニーク制約3. 主キー制約4. 外部キー制約5. カ...

HTML チュートリアル: title 属性と alt 属性

XHTML は CSS レイアウトの基礎です。jb51.net は常に XHTML 知識の習得を重視...

Vue の this.$store.state.xx.xx に関する簡単な説明

目次これを Vue.$store.state.xx.xxストアからデータを取得する私のプロジェクトフ...

dockercompose を使用して springboot-mysql-nginx アプリケーションをビルドする

前回の記事では、Docker を使用して、コンパイルされた jar パッケージをイメージに組み込む ...

HTML 内の input type="reset" タグが無効 (機能しない) である理由として考えられるもの。

<html:reset> タグを使用すると、リセット ボタンが無効になり、ボタンをクリッ...

Raspberry Pi 4b ubuntu19 サーバーへの docker-ce のインストール手順

Raspberry Pi モデルは 4b、1G RAM です。システムはubuntu19.10サーバ...

JavaScript で簡単な計算機を実装する

この記事の例では、参考までに簡単な計算機を実装するためのJavaScriptの具体的なコードを共有し...

Linux の特別な権限 SUID、SGID、SBIT の詳細な説明

序文Linux のファイルまたはディレクトリの権限については、通常の rwx 権限についてすべて知っ...

Docker Swarmの概念と使用法の詳細な説明

Docker Swarm は、Docker によって開発されたコンテナ クラスター管理サービスです。...

Linux で yum と入力した後に -bash: /usr/bin/yum: No such file or directory という問題を解決する方法

Linuxでyumを入力すると、プロンプトが表示されます: -bash: /usr/bin/yum:...

Linux ファイアウォール設定の詳細な手順 (yum ウェアハウス設定に基づく)

序文この実験では、デバッグ用に2つの仮想マシン(CentOs6とRed Hat 6)を準備します。 ...

Centos7にnginxをインストールする方法

必要な環境をインストールする1. gccのインストールnginx をインストールするには、公式サイト...

uniAppエディタWeChatスライド問題について

ユニアプリアプレットはWeChatでも同様のドロップダウン問題を抱えることになる解決策は、app.v...