Vue でドラッグ可能なレイアウトを実装するにはどうすればよいですか?

Web フロントエンド テクノロジの継続的な開発に伴い、SPA (シングル ページ アプリケーション) アーキテクチャを使用してアプリケーションを構築する開発者が増えています。現在、最も人気のある Web フロントエンド フレームワークの 1 つである Vue は、SPA アプリケーションの構築を容易にする豊富なコンポーネント ライブラリとツールを提供します。 Vue は、ドラッグ可能なレイアウトの実装に関して、いくつかの便利なソリューションも提供します。

1. Vue-Grid-Layout の使用

Vue-Grid-Layout は、Vue に基づいた応答性の高いグリッド レイアウト システムです。モバイル デバイスでのジェスチャ ドラッグとズームをサポートしながら、ドラッグ可能でサイズ変更可能なグリッド レイアウトを簡単に実装できる一連のコンポーネントを提供します。 Vue-Grid-Layout の使用は非常に簡単です。まずプロジェクトに導入する必要があります:

npm install vue-grid-layout -S

次に、次のように Vue コンポーネントで使用します:

<template>
  <vue-grid-layout :layout="layout" :col-num="12" :row-height="30" :is-draggable="true"
                   :is-resizable="true" :vertical-compact="false" :margin="[10, 10]"
                   :use-css-transforms="true" :auto-size="true">
    <vue-grid-item v-for="item in layout" :key="item.i" :x="item.x" :y="item.y" :w="item.w"
                   :h="item.h">
      <div class="grid-item-content">{{ item.i }}</div>
    </vue-grid-item>
  </vue-grid-layout>
</template>
<script>
import { VueGridLayout, VueGridItem } from 'vue-grid-layout';

export default {
  components: { VueGridLayout, VueGridItem },
  data() {
    return {
      layout: [
        { i: 'item1', x: 0, y: 0, w: 1, h: 2 },
        { i: 'item2', x: 1, y: 0, w: 1, h: 2 },
        { i: 'item3', x: 2, y: 0, w: 1, h: 2 },
        { i: 'item4', x: 3, y: 0, w: 1, h: 2 },
      ]
    }
  },
}
</script>

上記のコードでは、 VueGridLayout コンポーネントを定義し、レイアウト配列をそのレイアウト プロパティにバインドします。各項目は、ID (i)、x、y 座標、幅 (w)、高さ (h) を含むグリッド項目を表します。また、col-num 属性を設定してグリッド内の列数を指定し、row-height 属性を設定して各行の高さを設定し、is-dragable 属性と is-resizable 属性を設定してグリッド項目を変更できるかどうかを指定することもできます。それぞれドラッグしてサイズ変更します。 Vue-Grid-Layout には、必要に応じて構成できるさまざまなカスタマイズ オプションも用意されています。

2. Vue-Draggable を使用する

Vue-Draggable も人気のある Vue プラグインで、ドラッグ アンド ドロップによる並べ替えやドラッグ アンド ドロップなどのドラッグ可能なリストを Vue に実装できます。アンドドロップによる変更、親などTrello に似たドラッグ アンド ドロップ タスク パネルの実装に非常に適しています。 Vue-Draggable の使用も非常に簡単です。最初に Vue-Draggable を導入する必要があります:

npm install vuedraggable --save

次に、以下に示すように、Vue コンポーネントで使用します:

<template>
  <draggable v-model="list" :options="dragOptions">
    <div v-for="(item, index) in list" :key="item.id">
      <h3 class="title">{{ item.title }}</h3>
      <p class="content">{{ item.content }}</p>
    </div>
  </draggable>
</template>
<script>
  import draggable from 'vuedraggable';

  export default {
    components: { draggable },
    data() {
      return {
        list: [
          { id: 1, title: 'Title 1', content: 'Content 1' },
          { id: 2, title: 'Title 2', content: 'Content 2' },
          { id: 3, title: 'Title 3', content: 'Content 3' },
          { id: 4, title: 'Title 4', content: 'Content 4' },
          { id: 5, title: 'Title 5', content: 'Content 5' },
        ],
        dragOptions: {
          group: {
            name: 'task',
            pull: 'clone',
            put: false
          },
          sort: false,
          animation: 150,
        },
      }
    },
  }
</script>

上記のコードでは、ドラッグ可能なコンポーネント を作成し、リスト配列をその v モデルにバインドすると、各項目は ID、タイトル、コンテンツを含むリスト項目を表します。また、options 属性を使用して、ドラッグ アンド ドロップのグループ化を設定する group 属性、並べ替えを有効にするかどうかを設定する sort 属性、アニメーションの継続時間を設定するanimation 属性など、さまざまなカスタム オプションを設定することもできます。

概要

ドラッグ可能なレイアウトを実装するには Vue を使用するのが一般的ですが、Vue-Grid-Layout と Vue-Draggable は 2 つの優れたソリューションです。 Vue-Grid-Layoutは、ドラッグ可能でサイズ変更可能なグリッドレイアウトを実現できるグリッドレイアウトに適しており、さまざまな複雑なインタラクティブアプリケーションの構築に適しています。 Vue-Draggable は主にドラッグ アンド ドロップ リストに使用され、Trello のようなドラッグ アンド ドロップ タスク パネルの実装に非常に効果的です。適切なソリューションの選択は特定の使用例によって異なりますが、どちらもシンプルで柔軟に使用できます。

以上がVue でドラッグ可能なレイアウトを実装するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。