vue と Element-plus を使用してドラッグ アンド ドロップと並べ替え機能を実装する方法

vue と Element-plus を使用してドラッグ アンド ドロップと並べ替え機能を実装する方法

はじめに:
現代の Web 開発では、ユーザー インタラクション エクスペリエンスがますます重要になっています。ドラッグ アンド ドロップおよび並べ替え機能は、ユーザーが要素を簡単に並べ替えたり、要素の位置を調整したりできる一般的な対話型操作です。この記事では、Vue ライブラリと Element-plus ライブラリを使用してドラッグ アンド ドロップ機能と並べ替え機能を実装する方法を紹介し、対応するコード例を示します。

技術的な準備:
Vue と Element-plus に関連するコードを書き始めるには、まずいくつかのツールと環境を準備する必要があります。まず、Node.js と Vue CLI がインストールされていることを確認してください。次に、コマンド ラインで次のコマンドを実行して、新しい Vue プロジェクトを作成します。

vue create drag-and-sort-demo

プロンプトに従ってデフォルト構成を選択するか、独自のニーズに従って構成します。次に、Element-plus ライブラリをインストールします。

cd drag-and-sort-demo
npm install element-plus

すべての準備ができたら、コードの作成を開始します。

ドラッグ アンド ドロップ機能を実装します:
まず、Element-plus ライブラリを Vue コンポーネントに導入し、使用する必要があるコンポーネントを登録する必要があります:

<template>
  <div>
    <el-col :span="12">
      <el-card>
        <el-button type="success" icon="el-icon-plus" @click="addElement">
          Add Element
        </el-button>
        <el-draggable v-model="list">
          <template #item="{ element }">
            <el-card :header="element.title" shadow="hover">
              {{ element.content }}
            </el-card>
          </template>
        </el-draggable>
      </el-card>
    </el-col>
  </div>
</template>

<script>
import { ElButton, ElCard, ElCol, ElDraggable } from "element-plus";

export default {
  components: {
    ElButton,
    ElCard,
    ElCol,
    ElDraggable,
  },
  data() {
    return {
      list: [
        { title: "Card 1", content: "This is card 1" },
        { title: "Card 2", content: "This is card 2" },
        { title: "Card 3", content: "This is card 3" },
      ],
    };
  },
  methods: {
    addElement() {
      this.list.push({ title: "New Card", content: "This is a new card" });
    },
  },
};
</script>

上記ではコードでは、el-draggable コンポーネントを使用してドラッグ機能を実装します。 v-model ディレクティブは、すべてのカード要素を格納する list という名前の配列をバインドします。 「要素の追加」ボタンをクリックすると、新しいカード要素を list 配列に動的に追加できます。 template タグは、各カード要素のスタイルとコンテンツを定義するために el-dragable 内で使用されます。

次に、並べ替え機能を実装しましょう。

並べ替え関数を実装します:
並べ替え関数を実装するには、el-draggable コンポーネントの @change イベントと、対応するソートアルゴリズム。以下は、変更したコードです。

<template>
  <div>
    <el-col :span="12">
      <el-card>
        <el-button type="success" icon="el-icon-plus" @click="addElement">
          Add Element
        </el-button>
        <el-draggable v-model="list" @change="handleSort">
          <template #item="{ element }">
            <el-card :header="element.title" shadow="hover">
              {{ element.content }}
            </el-card>
          </template>
        </el-draggable>
      </el-card>
    </el-col>
  </div>
</template>

<script>
import { ElButton, ElCard, ElCol, ElDraggable } from "element-plus";

export default {
  components: {
    ElButton,
    ElCard,
    ElCol,
    ElDraggable,
  },
  data() {
    return {
      list: [
        { title: "Card 1", content: "This is card 1" },
        { title: "Card 2", content: "This is card 2" },
        { title: "Card 3", content: "This is card 3" },
      ],
    };
  },
  methods: {
    addElement() {
      this.list.push({ title: "New Card", content: "This is a new card" });
    },
    handleSort(event) {
      const { newIndex, oldIndex } = event;
      const movedElement = this.list.splice(oldIndex, 1)[0];
      this.list.splice(newIndex, 0, movedElement);
    },
  },
};
</script>

上記のコードでは、ドラッグの完了後に呼び出される handleSort という名前のメソッドを追加しました。 @change イベントで newIndex と oldIndex を抽出することで、配列内のドラッグされたカード要素の新しい位置と古い位置を取得し、# を渡すことができます。配列の ##splice メソッドはソートを実装します。

概要:

この記事では、Vue と Element-plus を使用してドラッグ アンド ドロップと並べ替え機能を実装する方法を紹介します。
el-dragable コンポーネントと対応するイベント処理メソッドを通じて、ドラッグ操作と並べ替え操作を簡単に実装できます。この記事が、Vue や Element-plus を使用して Web アプリケーションを開発する際の参考になれば幸いです。

以上がvue と Element-plus を使用してドラッグ アンド ドロップと並べ替え機能を実装する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。