この記事の例では、画像のドラッグと並べ替えを実装するための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 要素であるかどうかを判断し、画像がドラッグしたものと同じかどうかを確認してから、ドラッグした要素を挿入します。 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 を応援していただければ幸いです。 以下もご興味があるかもしれません:
|
>>: MySQL がデュアルマスターで構成されている場合にデータループの競合を回避する方法
この記事では、MySQL無料インストール版(zip)のインストールと設定のチュートリアルを参考までに...
目次機能紹介関数関数の作成コンストラクタは関数を作成する関数宣言は関数を作成する関数式関数を作成する...
目次角度成し遂げる呼び出し順序知らせイオニックionic はページのライフサイクルをどのように処理し...
目次1. nodejsをダウンロードする2. ダブルクリックしてインストール3. グローバル npm...
SVN サービスのバックアップ手順1. ソースサーバーとターゲットサーバーを準備するソースサーバー:...
目次再実行ログディスクデータを直接更新するのではなく、最初にメモリデータを更新する必要があるのはなぜ...
MongoDB はクロスプラットフォームであり、Windows と Linux の両方にインストール...
JavaScriptの日付エフェクトの具体的なコードは参考用です。具体的な内容は次のとおりです。コー...
MySQL クエリ キャッシュを設定する目的は次のとおりです。クエリ結果をキャッシュしておくと、次回...
序文Nginxの組み込みモジュールは、同時リクエスト数の制限とリクエストのソースの制限をサポートして...
Linux オペレーティング システムは過去 20 年間にわたってデータ センターに革命をもたらし...
1. RPMバージョンのインストールデータベースの他のバージョンがあるかどうかを確認し、ある場合は完...
最初のステップ: VMwareで、「編集」-「仮想ネットワークエディタ」をクリックします。下図に示す...
この記事の例では、スライディングブロック効果を実現するための小さなプログラムの具体的なコードを参考ま...
dockerでイメージを削除するコマンドはdocker rmiですが、このコマンドを実行してもイメー...