Vue でドラッグ アンド ドロップ要素をコピーして移動するにはどうすればよいですか?

Vue は、便利なドラッグ アンド ドロップ機能を提供する人気の JavaScript フレームワークで、要素を簡単にコピーおよび移動できます。次に、Vue でドラッグ アンド ドロップ要素をコピーおよび移動する方法を見てみましょう。

1. ドラッグ アンド ドロップ要素の基本的な実装

Vue でドラッグ アンド ドロップ要素のコピーと移動を実装するには、まず基本的なドラッグ アンド ドロップ要素を実装する必要があります。要素のドロップ関数。具体的な実装方法は次のとおりです。

1. ドラッグする必要がある要素をテンプレートに追加します。

<div class="drag-element" draggable="true">拖拽我</div>

ここでは、drag- という名前のクラスを追加しました。 element 要素を選択し、その draggable 属性を true に設定して、この要素がドラッグできることを示します。

2. イベント リスナーを Vue インスタンスに追加します:

new Vue({
  el: '#app',
  methods: {
    handleDragStart(e) {
      e.dataTransfer.setData('text/plain', ''); // 设置数据类型为纯文本
      e.target.classList.add('dragging'); // 添加拖拽时的样式
    },
    handleDragEnd(e) {
      e.target.classList.remove('dragging'); // 移除拖拽时的样式
    }
  }
})

ここでは 2 つのイベント: dragstart と dragend 。要素のドラッグが開始されると、handleDragStart メソッドが呼び出され、データ型が設定され、ドラッグ スタイルが追加されます。要素のドラッグが終了すると、handleDragEnd メソッドが呼び出され、ドラッグ スタイルが削除されます。

3. スタイルでドラッグするときにスタイルを設定します:

.drag-element.dragging {
  opacity: 0.5;
}

ここでは、要素がドラッグされていることを示すクラス名 .dragging を設定します。ドラッグされたときのスタイル。ニーズに応じて特定のスタイルを設定できます。

2. ドラッグ アンド ドロップ要素のコピーを実装する

ドラッグ アンド ドロップ要素の基本的な機能を理解したら、要素のコピーを開始できます。要素をコピーするには、コピーしたデータを dragstart イベントに設定し、drop イベントでコピー ロジックを処理する必要があります。

1. コピーしたデータを dragstart イベントに設定します。

handleDragStart(e) {
  const target = e.target.cloneNode(true); // 复制拖拽的元素
  e.dataTransfer.setData('text/plain', ''); // 设置数据类型为纯文本
  e.dataTransfer.setDragImage(target, 0, 0); // 设置拖拽时的图片
  this.$data.clone = target; // 保存复制的元素
}

ここでは、cloneNode メソッドを使用して、ドラッグされたデータをコピーします。 element を作成し、 dataTransfer オブジェクトにドラッグするときのデータ型と画像を設定し、コピーした要素を Vue インスタンスに保存します。

2. drop イベントでコピー ロジックを処理します:

handleDrop(e) {
  e.preventDefault(); // 阻止默认事件
  const newNode = this.$data.clone.cloneNode(true); // 复制元素
  const parent = e.target.parentNode; // 获取父元素
  parent.insertBefore(newNode, e.target); // 插入新元素
}

ここでは、まずデフォルト イベントの発生を防止してから、コピーされたイベントを取得します。要素、親要素、ターゲット要素を選択し、新しい要素を親要素に挿入します。要素のコピーの実装を完了します。

3. ドラッグ アンド ドロップ要素の移動を実現する

ドラッグ アンド ドロップ要素の基本的な機能を理解した後、要素の移動も実現できます。要素を移動するには、dragend および drop イベントで移動ロジックを処理する必要があります。

1. dragend イベントで移動のロジックを処理します:

handleDragEnd(e) {
  e.target.classList.remove('dragging'); // 移除拖拽时的样式
  if (this.$data.source && this.$data.target) { // 判断是否存在源元素和目标元素
    const target = this.$data.target; // 目标元素
    const source = this.$data.source; // 源元素
    const parent = target.parentNode; // 目标元素的父元素
    const index = Array.from(parent.children).indexOf(target); // 目标元素的索引
    parent.insertBefore(source, index > -1 ? target : null); // 插入元素
    this.$data.target = null; // 重置目标元素
    this.$data.source = null; // 重置源元素
  }
}

ここでは、まずドラッグ時にスタイルを削除し、次にソースかどうかを判断します。要素とターゲット要素 (存在する場合) は、ターゲット要素、ソース要素、およびターゲット要素の親要素とインデックスを取得し、ターゲット要素の前後にソース要素を挿入します。

2. drop イベントでの移動ロジックの処理:

handleDrop(e) {
  e.preventDefault(); // 阻止默认事件
  const source = this.$data.clone; // 获取复制的元素
  const target = e.target; // 获取目标元素
  if (source && target !== source) { // 判断是否为新元素
    this.$data.source = source; // 保存源元素
    this.$data.target = target; // 保存目标元素
  }
}

ここでは、まずデフォルト イベントの発生を阻止し、次に、コピーされた要素とターゲット要素を比較し、それが新しい要素であるかどうかを判断します。新しい要素でない場合は、ソース要素とターゲット要素が保存されます。

4. 概要

上記の実装手順により、Vue でドラッグ アンド ドロップ要素を簡単にコピーおよび移動できます。実装中に Vue インスタンス内のデータを維持し、ドラッグされた要素の状態とデータを保存する必要があることに注意してください。同時に、ドラッグ要素の滑らかさと安定性を確保するために、さまざまなイベント間の関係も処理する必要があります。

以上がVue でドラッグ アンド ドロップ要素をコピーして移動するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。