VueとElement-UIを使ってドラッグ＆ドロップソート機能を実装する方法
Vue と Element-UI を使用してドラッグ アンド ドロップの並べ替え機能を実装する方法
前書き:
Web 開発では、ドラッグ アンド ドロップの並べ替え機能は一般的で実用的な機能です。この記事では、Vue と Element-UI を使用してドラッグ アンド ドロップの並べ替え機能を実装する方法を紹介し、コード例を通して実装プロセスを示します。
1. 環境設定
- Node.js のインストール
開始する前に、Node.js をインストールする必要があります。 https://nodejs.org/ にアクセスして、オペレーティング システムに対応するバージョンをダウンロードしてインストールできます。 - Vue CLI のインストール
Vue CLI は、Vue プロジェクトを迅速に構築するために使用されるツールです。コマンド ライン ツールを開き、次のコマンドを実行して Vue CLI をインストールします。
npm install -g @vue/cli
- Vue プロジェクトを作成します
コマンドラインで次のように入力します 新しい Vue プロジェクトを作成するコマンド:
vue createrag-sort-demo
プロンプトに従って構成オプションを選択し、プロジェクトが作成されるまで待ちます。
- Element-UI のインストール
作成した Vue プロジェクト ディレクトリに移動し、コマンド ラインで次のコマンドを実行して Element-UI をインストールします:
npm element-ui のインストール
2. ドラッグ アンド ドロップの並べ替え機能の実装
- 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);
- デモ コンポーネントの作成
デモ用に src/components ディレクトリに新しいコンポーネント DragSortDemo.vue を作成します。ドラッグアンドドロップによる並べ替え機能。 DragSortDemo.vue ファイルを編集し、次のコードを追加します:
<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>
<スクリプト>
デフォルトのエクスポート {
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 メソッドは、ドラッグ アンド ドロップで並べ替えられたリスト データを保存するか、処理のためにバックエンドに送信します。
- コンポーネントの使用
src/App.vue ファイルで DragSortDemo コンポーネントを使用します:
<drag-sort-demo></drag-sort-demo>
<script><br>import DragSortDemo from './components/DragSortDemo.vue ' ;</p><p>デフォルトの {<br> コンポーネントをエクスポート: {</p><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class='brush:php;toolbar:false;'>DragSortDemo,</pre><div class="contentsignin">ログイン後にコピー</div></div><p>},<br>};<br></script>
3. プロジェクトを実行します
コマンド ラインで次のコマンドを実行してプロジェクトを開始します。
npm runserve
http://localhost:8080 にアクセスして、ドラッグ アンド ドロップによる並べ替えのデモ ページを参照してください。関数。リスト項目をドラッグして並べ替えを変更し、[並べ替えを保存] ボタンをクリックして並べ替え結果を保存します。
結論:
上記の手順により、Vue と Element-UI を使用してドラッグ アンド ドロップの並べ替え機能を実装することに成功しました。これにより、Web 開発にシンプルで実用的なソリューションが提供され、ユーザー エクスペリエンスが向上し、インターフェイスの対話が最適化されます。この記事が皆様のフロントエンド開発業務のお役に立てれば幸いです。
以上がVueとElement-UIを使ってドラッグ＆ドロップソート機能を実装する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
ホットAIツール
Undresser.AI Undress
リアルなヌード写真を作成する AI 搭載アプリ
AI Clothes Remover
写真から衣服を削除するオンライン AI ツール。
Undress AI Tool
脱衣画像を無料で
Clothoff.io
AI衣類リムーバー
AI Hentai Generator
AIヘンタイを無料で生成します。
人気の記事
ホットツール
メモ帳++7.3.1
使いやすく無料のコードエディター
SublimeText3 中国語版
中国語版、とても使いやすい
ゼンドスタジオ 13.0.1
強力な PHP 統合開発環境
ドリームウィーバー CS6
ビジュアル Web 開発ツール
SublimeText3 Mac版
神レベルのコード編集ソフト（SublimeText3）
ホットトピック
7517
15
1378
52
79
11
21
66
VUEのボタンに関数を追加する方法
Apr 08, 2025 am 08:51 AM
HTMLテンプレートのボタンをメソッドにバインドすることにより、VUEボタンに関数を追加できます。 VUEインスタンスでメソッドを定義し、関数ロジックを書き込みます。
VueでBootstrapの使用方法
Apr 07, 2025 pm 11:33 PM
vue.jsでBootstrapを使用すると、5つのステップに分かれています。ブートストラップをインストールします。 main.jsにブートストラップをインポートしますブートストラップコンポーネントをテンプレートで直接使用します。オプション：カスタムスタイル。オプション：プラグインを使用します。
vue.jsでJSファイルを参照する方法
Apr 07, 2025 pm 11:27 PM
vue.jsでJSファイルを参照するには3つの方法があります。タグ;; mounted（）ライフサイクルフックを使用した動的インポート。 Vuex State Management Libraryを介してインポートします。
VueでWatchの使用方法
Apr 07, 2025 pm 11:36 PM
Vue.jsの監視オプションにより、開発者は特定のデータの変更をリッスンできます。データが変更されたら、Watchはコールバック関数をトリガーして更新ビューまたはその他のタスクを実行します。その構成オプションには、すぐにコールバックを実行するかどうかを指定する即時と、オブジェクトまたは配列の変更を再帰的に聴くかどうかを指定するDEEPが含まれます。
Vueによる前のページに戻る方法
Apr 07, 2025 pm 11:30 PM
vue.jsには、前のページに戻る4つの方法があります。$ router.go（-1）$ router.back（）outes＆lt; router-link to =＆quot;/＆quot; Component Window.history.back（）、およびメソッド選択はシーンに依存します。
Vueはマーキー/テキストスクロール効果を実現します
Apr 07, 2025 pm 10:51 PM
CSSアニメーションまたはサードパーティライブラリを使用して、VUEでマーキー/テキストスクロール効果を実装します。この記事では、CSSアニメーションの使用方法を紹介します。スクロールテキストを作成し、テキストを＆lt; div＆gt;をラップします。 CSSアニメーションを定義し、オーバーフローを設定します：非表示、幅、アニメーション。キーフレームを定義し、アニメーションの開始と終了時にtranslatex（）を設定します。期間、スクロール速度、方向などのアニメーションプロパティを調整します。
Vue Paginationの使用方法
Apr 08, 2025 am 06:45 AM
ページネーションは、パフォーマンスとユーザーエクスペリエンスを向上させるために、大きなデータセットを小さなページに分割するテクノロジーです。 VUEでは、次の組み込みメソッドを使用してページを使用できます。ページの総数を計算します。TotalPages（）トラバーサルページ番号：V-For Directive on Currentページを設定します。
Vueのバージョンを照会する方法
Apr 07, 2025 pm 11:24 PM
Vue Devtoolsを使用してブラウザのコンソールでVueタブを表示することにより、Vueバージョンを照会できます。 NPMを使用して、「NPM List -G Vue」コマンドを実行します。 package.jsonファイルの「依存関係」オブジェクトでVueアイテムを見つけます。 Vue CLIプロジェクトの場合、「Vue -Version」コマンドを実行します。 ＆lt; script＆gt;でバージョン情報を確認してくださいVueファイルを参照するHTMLファイルにタグを付けます。
