Vue と Element-UI を使用してドラッグ アンド ドロップの並べ替え機能を実装する方法
前書き:
Web 開発では、ドラッグ アンド ドロップの並べ替え機能は一般的で実用的な機能です。この記事では、Vue と Element-UI を使用してドラッグ アンド ドロップの並べ替え機能を実装する方法を紹介し、コード例を通して実装プロセスを示します。
1. 環境設定
npm install -g @vue/cli
vue createrag-sort-demo
プロンプトに従って構成オプションを選択し、プロジェクトが作成されるまで待ちます。
npm element-ui のインストール
2. ドラッグ アンド ドロップの並べ替え機能の実装
import Vue from 'vue';
import ElementUI from 'element-ui';
import 'element-ui/lib/theme- chalk/index.css';
Vue.use(ElementUI);
<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);
}
説明:
<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 サイトの他の関連記事を参照してください。
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
