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 ファイルを編集し、次のコードを追加します:

デフォルトのエクスポート {
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 };
  });
  // 将排序后的列表保存到数据库或发送给后端
},

},
};

.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);
}

説明:

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

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

<script><br>import DragSortDemo from './components/DragSortDemo.vue ' ;</script>

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

DragSortDemo,

},
};

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

npm runserve

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

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

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