この記事の例では、画像のドラッグと並べ替えを実装するための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 パフォーマンスの最適化MySQL パフォーマンスの最適化とは、リソースを合理的に配置し、...
導入MySQL の SQL クエリ ステートメントで is null、is not null、!= ...
HTML タグには、インライン要素とブロックレベル要素の 2 種類があります。まず、インライン要素と...
私たち謙虚なプログラマーは、今でもこう歌わなければなりません。「あなたも私も、この世に生まれて、一日...
1.すべてのIPアドレスが3つのページa1.htm、a2.htm、a3.htmにアクセスするのを禁止...
導入クロージャは JavaScript の非常に強力な機能です。いわゆるクロージャは関数内の関数です...
質問画像とテキストのシームレスなスクロールは、一般的に携帯電話では良い効果をもたらしますが、一部のモ...
<br />それぞれのトピックについて、チーム内でメールで議論します。議論が白熱するにつ...
テキストシャドウテキストに影を追加します。テキストとテキスト装飾に複数のシャドウを追加することができ...
1. 目的Flask アプリケーションをローカルで作成し、Docker でパッケージ化し、独自のサー...
目次1. カウントデータが失われる解決2. 明確なデータ損失3.データ損失を選択解決4. Nullポ...
序文こういう特殊効果ってよく見かけますよね。すごくかっこいいですよね。 これは、Google Mat...
カーソルの作成まず、MySql でデータ テーブルを作成します。 存在しない場合はテーブルを作成 `...
Linux ではすべてがファイルなので、Android システム自体は Linux + Java だ...
tomcat サーバーの構成誰もが Web について学習するときに、自分のツール用に Tomcat ...