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

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

WBOY

リリース： 2023-06-25 08:35:21

オリジナル

4206 人が閲覧しました

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

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

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

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

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

ログイン後にコピー

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

イベントリスナーを 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 メソッドが呼び出され、ドラッグスタイルが削除されます。

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

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

ログイン後にコピー

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

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

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

コピーしたデータを 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 インスタンスに保存します。

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 イベントで移動ロジックを処理する必要があります。

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; // 重置源元素
  }
}

ログイン後にコピー

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

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 サイトの他の関連記事を参照してください。