Vueでドラッグアンドドロップインターフェースを作成する方法

Vue Draggableを使用して、ドラッグアンドドロップの並べ替えをすばやく実装し、ほとんどのプロジェクトに適した双方向のバインディング、アニメーション、クロスコンテナードラッグをサポートします。 2。ネイティブHTML5ドラッグアンドドロップAPIを使用して、サードパーティライブラリに依存せずに動作を完全にカスタマイズしますが、手動のステータス管理が必要です。プロジェクトのニーズに応じて適切なソリューションを選択する必要があり、ほとんどの場合、Vue Draggableが推奨され、特別なニーズに合わせて軽量またはオプションのネイティブ実装を選択できます。

VUEでドラッグアンドドロップインターフェイスを作成することは、特にVue Draggable （Surtable.jsに基づく）などのライブラリの助けを借りて、またはNative HTML5 Drag and Drop APIを使用して、簡単です。以下は、人気のあるライブラリとネイティブイベントを備えた建物を使用する2つの実用的なアプローチです。そのため、ニーズに基づいて選択できます。

Vue Draggableの使用（ほとんどの場合に推奨）

Vue Draggable 、sortable.jsをラップするVueコンポーネントであり、最小限のコードでsortableおよびDraggableリストを簡単に作成できます。

1. Vue Draggableをインストールします

VUE 3：

 npmインストールvuedraggable@^4.1.0

注：VUE 3の互換性にバージョン4を使用します。

2。基本的な使用法

コンポーネントとしてvuedraggableインポートして使用します。

 <テンプレート>
  <div>
    <h3>ドラッグアンドドロップリスト</h3>
    <ドラッグ可能
      v-model = "items"
      tag = "ul"
      item-key = "id"
      ゴーストクラス=「ゴースト」
      @start = "dragstart"
      @end = "dragend"
    >
      <template #item = "{element}">
        <li> {{element.name}} </li>
      </テンプレート>
    </draggable>
  </div>
</テンプレート>

<スクリプトのセットアップ>
&#39;vue&#39;から{ref}をインポートします。
「vuedraggable」からドラッグ可能なインポート。

//アイテムのリスト
const items = ref（[[
  {id：1、name： &#39;item 1&#39;}、
  {id：2、name： &#39;item 2&#39;}、
  {id：3、name： &#39;item 3&#39;}
]）;

関数dragstart（）{
  console.log（ &#39;drag start&#39;）;
}

関数dragend（）{
  console.log（ &#39;drag endded&#39;）;
  console.log（ &#39;new Order：&#39;、items.value）;
}
</script>

<style>
。おばけ {
  不透明度：0.5;
  背景：＃c8ebfb;
}
</style>

重要なオプション：

• v-model ：リストと更新を並べ替えてバインドします。
• tag ：ラッパーを特定の要素としてレンダリングします（この場合はul ）。
• item-key ：VUE 3のv-forのようなレンダリングに必要です（一意のキーを使用）。
• ghost-class ：ドラッグされたプレースホルダーにクラスを適用します。

この方法は、リスト、グリッド、さらには最小限の労力でドラッグするクロスコンテナーをサポートしています。

ネイティブHTML5のドラッグアンドドロップを使用する（カスタム動作用）

完全に制御したい場合、または外部ライブラリを避けている場合は、ネイティブAPIを使用してください。

例：ネイティブイベントを備えたDraggableリスト

<テンプレート>
  <div>
    <h3>ネイティブドラッグアンドドロップ</h3>
    <ul>
      <li
        v-for = "（item、index）inアイテム」
        ：key = "item.id"
        draggable = "true"
        @dragstart = "ondragstart（index）"
        @dragover.prevent = "ondragover（$ event、index）"
        @drop = "ondrop（index）"
        @dragend = "ondragend"
        class = "draggable-item"
      >
        {{item.name}}
      </li>
    </ul>
  </div>
</テンプレート>

<スクリプトのセットアップ>
&#39;vue&#39;から{ref}をインポートします。

const items = ref（[[
  {id：1、name： &#39;apple&#39;}、
  {id：2、name： &#39;banana&#39;}、
  {id：3、name： &#39;Cherry&#39;}
]）;

const draggedindex = ref（null）;

function ondragstart（index）{
  draggedindex.value = index;
  // Firefoxに必要です
  event.DatatRansfer？.SetData（ &#39;Text/Plain&#39;、 &#39;&#39;）;
}

function ondragover（event、index）{
  const current = draggedindex.value;
  const target = index;

  if（current === null || current ===ターゲット）return;

  //配列を再注文します
  const moveTiTem = items.value.splice（current、1）[0];
  items.value.splice（ターゲット、0、movemitem）;

  //インデックスを更新します
  draggedindex.value =ターゲット;
}

function ondrop（index）{
  //ドロップを完成させます
  console.log（ &#39;indexでドロップ：&#39;、index）;
}

function ondragend（）{
  draggedindex.value = null;
}
</script>

<style>
.draggable-item {
  パディング：10px;
  マージン：4px 0;
  背景：＃f0f0f0;
  カーソル：移動;
}

.draggable-item：Hover {
  背景：＃e0e0e0;
}
</style>

それがどのように機能するか：

• draggable="true"を有効にして要素をドラッグします。
• @dragstart ：ドラッグされているインデックスを記録します。
• @dragover.prevent ：デフォルトがドロップを許可するのを防ぎます（必須）。
• @drop ：ロジックの並べ替えをトリガーします。
• @dragend ：ドラッグ後にクリーンアップします。

これにより、完全に制御できますが、より多くの手動の州管理が必要です。

どのアプローチを選択しますか？

• 必要に応じてVue Draggableを使用してください。

  • 高速開発
  • マルチリストドラッグ
  • アニメーションサポート
  • タッチサポート（モバイル）

• あなたの場合はネイティブAPIを使用します：

  • 依存関係がゼロしたい
  • 高度にカスタマイズされたドラッグ動作が必要です
  • ドラッグアンドドロップがフードの下でどのように機能するかを学んでいます

両方のアプローチはVUE 3でうまく機能します。ほとんどのアプリケーションでは、 vuedraggable時間を節約し、エッジケースを処理します。軽量または非常に特定のニーズのために、ネイティブイベントは完全に実行可能です。

基本的に、プロジェクトの範囲に適したツールを選択します。

以上がVueでドラッグアンドドロップインターフェースを作成する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。