Vue と Element-UI を使用してデータのドラッグと並べ替え機能を実装する方法-Vue.js-php.cn

Vue と Element-UI を使用してデータのドラッグと並べ替え機能を実装する方法

王林

リリース： 2023-07-21 17:09:20

オリジナル

2350 人が閲覧しました

Vue と Element-UI を使用してデータのドラッグと並べ替え機能を実装する方法

はじめに:
Web アプリケーションの開発に伴い、多くのアプリケーション部分でデータのドラッグと並べ替え機能が必要になりました。最新の JavaScript フレームワークとして、Vue.js は便利なデータバインディングとコンポーネントベースの開発メソッドを提供します。一方、Element-UI は Vue.js に基づく UI フレームワークとして、一連の優れたコンポーネントとインタラクティブな効果を提供します。この記事では、VueとElement-UIを使ってデータのドラッグや並べ替え機能を実装する方法とサンプルコードを紹介します。

準備作業
始める前に、関連する開発環境を準備する必要があります。まず、Node.js と npm がインストールされていることを確認します。次に、npm 経由で Vue と Element-UI をインストールします。
```
npm install vue
npm install element-ui
```
ログイン後にコピー
インストールが完了したら、新しい Vue プロジェクトを作成し、Element-UI ライブラリを導入します。
```
vue create drag-sort-demo
cd drag-sort-demo
npm install element-ui
```
ログイン後にコピー
次に、Vue のエントリファイル main.js に Vue と Element-UI を導入し、Vue.use() メソッドを使用して Element-UI コンポーネントを登録します。
```
import Vue from 'vue'
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'

Vue.use(ElementUI)

new Vue({
  render: h => h(App)
}).$mount('#app')
```
ログイン後にコピー
ここまでで準備作業は完了しました。次にデータのドラッグとソート機能の実装を開始します。
データリストの実装
まず、ドラッグ、ドロップ、並べ替えできるデータ項目を表示するデータリストを作成する必要があります。 Vue コンポーネントでは、v-for ディレクティブを使用してデータリストを移動し、el-card コンポーネントを使用して各データ項目を表示できます。
```
<template>
  <div>
 <el-card v-for="item in list" :key="item.id">
   {{ item.name }}
 </el-card>
  </div>
</template>

<script>
export default {
  data() {
 return {
   list: [
     { id: 1, name: '数据项1' },
     { id: 2, name: '数据项2' },
     { id: 3, name: '数据项3' },
     { id: 4, name: '数据项4' },
     { id: 5, name: '数据项5' }
   ]
 }
  }
}
</script>
```
ログイン後にコピー
これでデータ一覧の表示が完了しました。
ドラッグアンドドロップ機能の追加
次に、データ項目ごとにドラッグアンドドロップ機能を追加します。 Element-UI では、el-draggable ディレクティブを使用してドラッグアンドドロップ機能を実装できます。 el-dragable ディレクティブを el-card コンポーネントに追加し、データ項目に関連するプロパティをバインドできます。
```
<template>
  <div>
 <el-card v-for="item in list" :key="item.id" v-el-draggable="item">
   {{ item.name }}
 </el-card>
  </div>
</template>

<script>
export default {
  // ...
  directives: {
 'el-draggable': {
   bind(el, binding, vnode) {
     el.draggable = true
     el.addEventListener('dragstart', (event) => {
       event.dataTransfer.setData('text/plain', JSON.stringify(binding.value))
     })
   }
 }
  }
}
</script>
```
ログイン後にコピー
el-draggable ディレクティブでは、要素の draggable 属性を true に設定して、ドラッグ機能を有効にします。次に、dragstart イベントで、現在のデータ項目の値を JSON 文字列として DataTransfer オブジェクトに保存します。
並べ替え機能の追加
ドラッグアンドドロップ機能に加えて、データ項目を指定の位置にドラッグした後の並べ替え機能も実装する必要があります。 Element-UI では、el-dropzone ディレクティブを使用して並べ替え機能を実装できます。 el-card コンポーネントが配置されているコンテナーに el-dropzone ディレクティブを追加し、データリストに関連するプロパティをバインドできます。
```
<template>
  <div v-el-dropzone="list">
 <el-card v-for="item in list" :key="item.id" v-el-draggable="item">
   {{ item.name }}
 </el-card>
  </div>
</template>

<script>
export default {
  // ...
  directives: {
 'el-draggable': {
   // ...
   bind(el, binding, vnode) {
     // ...
     el.addEventListener('dragend', () => {
       vnode.context.$forceUpdate();
     })
   }
 },
 'el-dropzone': {
   bind(el, binding, vnode) {
     el.addEventListener('dragover', (event) => {
       event.preventDefault()
     })
     el.addEventListener('drop', (event) => {
       event.preventDefault()
       const draggedItem = JSON.parse(event.dataTransfer.getData('text/plain'))
       const newList = binding.value.slice()
       const index = newList.findIndex(item => item.id === draggedItem.id)
       newList.splice(index, 1)
       newList.splice(el.dataset.index, 0, draggedItem)
       vnode.context[binding.expression] = newList
     })
   }
 }
  }
}
</script>
```
ログイン後にコピー
el-dropzone ディレクティブでは、ブラウザのデフォルトのドラッグアンドドロップ動作を防止するために、dragover イベントでPreventDefault メソッドを呼び出します。次に、drop イベントで、ドラッグされたデータ項目を取得し、その ID に基づいて元のデータリスト内の位置を見つけます。次に、データリストの新しいコピーを作成し、そこからドラッグしたデータ項目を削除し、指定された場所にデータ項目を挿入します。最後に、Vue インスタンス内の対応するデータ属性を変更して、データリストを更新します。
エフェクトの表示

上記の手順を実行すると、データのドラッグとソート機能の開発が完了しました。これで、プロジェクトを実行して効果を確認できるようになりました。

npm run serve

ログイン後にコピー

ブラウザを開いて http://localhost:8080 にアクセスすると、ドラッグアンドドロップや並べ替え機能を使用してデータリストが表示されます。

結論:
この記事では、Vue と Element-UI を使用してデータのドラッグと並べ替え機能を実装する方法について詳しく説明します。 el-dragable ディレクティブと el-dropzone ディレクティブを使用すると、データリストにドラッグと並べ替えの機能を簡単に追加できます。この記事が、Web アプリケーションを開発している開発者にとって、この共通機能をより効率的に実装できるように役立つことを願っています。

参考リンク: