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

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

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

1. 準備作業
   始める前に、関連する開発環境を準備する必要があります。まず、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')

   ここまでで準備作業は完了しました。次にデータのドラッグとソート機能の実装を開始します。

2. データ リストの実装
   まず、ドラッグ、ドロップ、並べ替えできるデータ項目を表示するデータ リストを作成する必要があります。 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>

   これでデータ一覧の表示が完了しました。

3. ドラッグ アンド ドロップ機能の追加
   次に、データ項目ごとにドラッグ アンド ドロップ機能を追加します。 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 オブジェクトに保存します。

4. 並べ替え機能の追加
   ドラッグ アンド ドロップ機能に加えて、データ項目を指定の位置にドラッグした後の並べ替え機能も実装する必要があります。 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 インスタンス内の対応するデータ属性を変更して、データ リストを更新します。

5. エフェクトの表示

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

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 サイトの他の関連記事を参照してください。