VueとElement-UIを使ってドラッグ＆ドロップソート機能を実装する方法

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

前書き:
Web 開発では、ドラッグ アンド ドロップの並べ替え機能は一般的で実用的な機能です。この記事では、Vue と Element-UI を使用してドラッグ アンド ドロップの並べ替え機能を実装する方法を紹介し、コード例を通して実装プロセスを示します。

1. 環境設定

1. Node.js のインストール
   開始する前に、Node.js をインストールする必要があります。 https://nodejs.org/ にアクセスして、オペレーティング システムに対応するバージョンをダウンロードしてインストールできます。
2. Vue CLI のインストール
   Vue CLI は、Vue プロジェクトを迅速に構築するために使用されるツールです。コマンド ライン ツールを開き、次のコマンドを実行して Vue CLI をインストールします。

npm install -g @vue/cli

3. Vue プロジェクトを作成します
   コマンドラインで次のように入力します 新しい Vue プロジェクトを作成するコマンド:

vue createrag-sort-demo

プロンプトに従って構成オプションを選択し、プロジェクトが作成されるまで待ちます。

4. Element-UI のインストール
   作成した Vue プロジェクト ディレクトリに移動し、コマンド ラインで次のコマンドを実行して Element-UI をインストールします:

npm element-ui のインストール

2. ドラッグ アンド ドロップの並べ替え機能の実装

1. Import Element-UI
   Entry ファイル src に Element-UI のスタイルとコンポーネントをインポートしますVue プロジェクトの /main.js:

import Vue from 'vue';
import ElementUI from 'element-ui';
import 'element-ui/lib/theme- chalk/index.css';

Vue.use(ElementUI);

2. デモ コンポーネントの作成
   デモ用に src/components ディレクトリに新しいコンポーネント DragSortDemo.vue を作成します。ドラッグアンドドロップによる並べ替え機能。 DragSortDemo.vue ファイルを編集し、次のコードを追加します:

d477f9ce7bf77f53fbcf36bec1b69b7a
dc6dce4a544fdca2df29d5ac0ea9906b

<div class="drag-sort-demo">
  <el-collapse-transition>
    <div v-for="item in list" :key="item.id" class="drag-item" :class="{ 'dragging': draggingId === item.id }" draggable="true" @dragstart="handleDragStart(item)" @dragend="handleDragEnd(item)">
      {{ item.name }}
    </div>
  </el-collapse-transition>
</div>
<el-button type="primary" @click="handleSort">保存排序</el-button>

16b28748ea4df4d9c2150843fecfba68
3399104e6938bdac11bae5f4688ce7ba

4e07eaec52b67b6abe4024604b22f1f1
デフォルトのエクスポート {
data() {

return {
  list: [
    { id: 1, name: 'A' },
    { id: 2, name: 'B' },
    { id: 3, name: 'C' },
    { id: 4, name: 'D' },
    { id: 5, name: 'E' },
  ],
  draggingId: null,
};

},
メソッド: {

handleDragStart(item) {
  this.draggingId = item.id;
},
handleDragEnd() {
  this.draggingId = null;
},
handleSort() {
  const sortedList = Array.from(this.$el.querySelectorAll('.drag-item')).map((el, index) => {
    const id = el.getAttribute('data-id');
    const name = el.textContent;
    return { id, name, sort: index + 1 };
  });
  // 将排序后的列表保存到数据库或发送给后端
},

},
};
2cacc6d41bbb37262a98f745aa00fbf0

bab64a26f295faccf2facf6b9a41e4d8
.drag-sort-demo {
表示: flex;
flex-wrap: Wrap;
}

.drag-item {
パディング: 10px;
マージン: 10px 0;
背景色: #f5f5f5;
ボーダー: 1px 実線 #ebebeb;
カーソル: 移動;
トランジション: box-shadow 0.3s;
}

.drag-item.dragging {
box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
}
531ac245ce3e4fe3d50054a55f265927

説明:

• テンプレートで、v-for ディレクティブを使用してリスト項目を動的にレンダリングします。リスト項目のクラスは計算プロパティにバインドされており、現在ドラッグされている項目がリスト項目であるかどうかを判断するために使用されます。
• 各リスト項目にドラッグ可能属性を追加し、ドラッグ開始イベントとドラッグ終了イベントをそれぞれトリガーするために、dragstart イベント ハンドラーとドラッグ終了イベント ハンドラーを登録します。
• handleSort メソッドは、ドラッグ アンド ドロップで並べ替えられたリスト データを保存するか、処理のためにバックエンドに送信します。

3. コンポーネントの使用
   src/App.vue ファイルで DragSortDemo コンポーネントを使用します:

d477f9ce7bf77f53fbcf36bec1b69b7a
403635a8437259f9029048978648f8d3

<drag-sort-demo></drag-sort-demo>

16b28748ea4df4d9c2150843fecfba68
21c97d3a051048b8e55e3c8f199a54b2

3f1c4e4b6b16bbbd69b2ee476dc4f83a
import DragSortDemo from './components/DragSortDemo.vue ' ;

デフォルトの {
コンポーネントをエクスポート: {

DragSortDemo,

},
};
2cacc6d41bbb37262a98f745aa00fbf0

3. プロジェクトを実行します
コマンド ラインで次のコマンドを実行してプロジェクトを開始します。

npm runserve

http://localhost:8080 にアクセスして、ドラッグ アンド ドロップによる並べ替えのデモ ページを参照してください。関数。リスト項目をドラッグして並べ替えを変更し、[並べ替えを保存] ボタンをクリックして並べ替え結果を保存します。

結論:
上記の手順により、Vue と Element-UI を使用してドラッグ アンド ドロップの並べ替え機能を実装することに成功しました。これにより、Web 開発にシンプルで実用的なソリューションが提供され、ユーザー エクスペリエンスが向上し、インターフェイスの対話が最適化されます。この記事が皆様のフロントエンド開発業務のお役に立てれば幸いです。

以上がVueとElement-UIを使ってドラッグ＆ドロップソート機能を実装する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。