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

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

この記事の例では、画像のドラッグと並べ替えを実装するためのVueの具体的なコードを参考までに共有しています。具体的な内容は次のとおりです。

原理:画像のリストがあります。画像の 1 つをドラッグします (dragstart をトリガーします)。ドラッグした画像が他の画像の位置に移動すると (dragover をトリガーします)、ドラッグした画像は元の位置からその位置に移動します (dragend をトリガーします)。

dragstart:ユーザーが要素またはテキスト選択のドラッグを開始したときに、dragstart イベントが発生します。

dragover:要素または選択したテキストが有効なドロップ ターゲット上にドラッグされると、dragover イベントがトリガーされます (数百ミリ秒ごとに 1 回)。

dragend:ドラッグ アンド ドロップ操作が終了すると、ドラッグ アンド ドロップ イベントがトリガーされます。 (ここでは必要ありません)

(1)画像リストのHTML構造。ドラッグする必要がある要素に draggable 属性を追加します。ここで注意してください: Vue はレンダリング時にインプレース再利用を使用するため、テンプレートの for ループのキー値は一意である必要があります。キー値が一意の場合、並べ替え後にレンダリングされたリスト ノードは再利用されず、いくつかの問題を回避できます。 (挿入時には、シーケンス番号に従って特定のデータを配列に挿入します)

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

(2)イベント:dragstart、dragoverバインディングイベントonDragStart、onDragOver

onDragStart: ドラッグする要素を識別し、ドラッグ プロセス中に dragover バインディング イベントで使用するためにその状態を保存します。

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

onDragOver: ドラッグ処理中に要素が有効なターゲット上にあるときにイベントがトリガーされます。ドラッグされた要素ではなく、ターゲット要素が識別されます。まず、ターゲット要素が必要なターゲット要素であるかどうかを識別します。この例では、li 要素であるかどうかを判断し、画像がドラッグしたものと同じかどうかを確認してから、ドラッグした要素を挿入します。
ドラッグした要素と対象要素の位置番号を特定し、ドラッグした要素を対象要素の前に挿入し、ドラッグした要素の元の位置にあるデータを削除します。Vue では、データ操作のみを実行する必要があります。

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)) の間 {
                インデックス++;
            }
            インデックスを返します。
        },
    }
}
</スクリプト>

以上がこの記事の全内容です。皆様の勉強のお役に立てれば幸いです。また、123WORDPRESS.COM を応援していただければ幸いです。

以下もご興味があるかもしれません:
  • Vueプラグインdrag​​gableは画像のドラッグと移動の順序を実現します
  • Vueのドラッグアンドドロップソートプラグインvuedraggableの使い方を詳しく説明します
  • VueコンポーネントDraggableはドラッグ機能を実装します
  • Vue.Draggable で画像をドラッグして並べ替える方法

<<:  SSHを使用してDockerサーバーに接続する方法

>>:  MySQL がデュアルマスターで構成されている場合にデータループの競合を回避する方法

推薦する

MySQL 無料インストール版 (zip) のインストールと設定の詳細なチュートリアル

この記事では、MySQL無料インストール版(zip)のインストールと設定のチュートリアルを参考までに...

JavaScript関数導入の詳しい説明

目次機能紹介関数関数の作成コンストラクタは関数を作成する関数宣言は関数を作成する関数式関数を作成する...

AngularとIonicのライフサイクルとフック関数を素早く理解するための記事

目次角度成し遂げる呼び出し順序知らせイオニックionic はページのライフサイクルをどのように処理し...

nodejsとyarnをインストールし、Taobaoソースプロセスレコードを構成する

目次1. nodejsをダウンロードする2. ダブルクリックしてインストール3. グローバル npm...

SVNサービスバックアップ操作手順の共有

SVN サービスのバックアップ手順1. ソースサーバーとターゲットサーバーを準備するソースサーバー:...

MySQL の永続性とロールバックの原理を 1 つの記事で理解する

目次再実行ログディスクデータを直接更新するのではなく、最初にメモリデータを更新する必要があるのはなぜ...

Linux での MongoDB のインストールに関するチュートリアル

MongoDB はクロスプラットフォームであり、Windows と Linux の両方にインストール...

JavaScriptはシンプルな日付効果を実装します

JavaScriptの日付エフェクトの具体的なコードは参考用です。具体的な内容は次のとおりです。コー...

MySQL query_cache_type パラメータと使用方法の詳細

MySQL クエリ キャッシュを設定する目的は次のとおりです。クエリ結果をキャッシュしておくと、次回...

Nginx ベースのアクセス制御と接続制限の実装

序文Nginxの組み込みモジュールは、同時リクエスト数の制限とリクエストのソースの制限をサポートして...

Docker は次の「Linux」になれるか?

Linux オペレーティング システムは過去 20 年間にわたってデータ センターに革命をもたらし...

Linux Centos7 に mysql8 をインストールするチュートリアル

1. RPMバージョンのインストールデータベースの他のバージョンがあるかどうかを確認し、ある場合は完...

CentOS 8 VMware 仮想マシンがインターネットにアクセスするための静的 IP ネットワーク カードの設定の詳細な説明

最初のステップ: VMwareで、「編集」-「仮想ネットワークエディタ」をクリックします。下図に示す...

スライダー効果を実装するミニプログラム

この記事の例では、スライディングブロック効果を実現するための小さなプログラムの具体的なコードを参考ま...

Dockerでイメージを削除する方法

dockerでイメージを削除するコマンドはdocker rmiですが、このコマンドを実行してもイメー...