ホームページ >ウェブフロントエンド >Vue.js >Vue と Element-UI を使用してデータのドラッグと並べ替え機能を実装する方法

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

王林オリジナル: 2023-07-21 17:09:202315ブラウズ

はじめに:
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 アプリケーションを開発している開発者にとって、この共通機能をより効率的に実装できるように役立つことを願っています。

参考リンク:

Vue 公式ドキュメント: https://cn.vuejs.org/
Element-UI 公式ドキュメント: https://element. eleme.io/

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

JavaScript node.js json vue.js npm for 字符串 JS 对象事件 http https ui

声明：

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

前の記事：ルーティングを使用して Vue でログイン認証とページジャンプロジックを実装するにはどうすればよいですか?次の記事：ルーティングを使用して Vue でログイン認証とページジャンプロジックを実装するにはどうすればよいですか?

続きを見る