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 サイトの他の関連記事を参照してください。
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
