So verwenden Sie Vue und Element-UI, um Funktionen zum Ziehen und Sortieren von Daten zu implementieren

So verwenden Sie Vue und Element-UI, um Funktionen zum Ziehen und Sortieren von Daten zu implementieren

Einführung:
Mit der Entwicklung von Webanwendungen sind Funktionen zum Ziehen und Sortieren von Daten zu einem notwendigen Bestandteil vieler Anwendungen geworden. Als modernes JavaScript-Framework bietet Vue.js praktische Datenbindungs- und komponentenbasierte Entwicklungsmethoden, während Element-UI als auf Vue.js basierendes UI-Framework eine Reihe hervorragender Komponenten und interaktiver Effekte bereitstellt. In diesem Artikel wird erläutert, wie Sie mit Vue und Element-UI Funktionen zum Ziehen und Sortieren von Daten implementieren und Beispielcode bereitstellen.

1. Vorbereitung
   Bevor wir beginnen, müssen wir die entsprechende Entwicklungsumgebung vorbereiten. Stellen Sie zunächst sicher, dass Node.js und npm installiert sind. Installieren Sie dann Vue und Element-UI über npm.

   npm install vue
   npm install element-ui

   Nach dem Login kopieren

   Erstellen Sie nach Abschluss der Installation ein neues Vue-Projekt und stellen Sie die Element-UI-Bibliothek vor.

   vue create drag-sort-demo
   cd drag-sort-demo
   npm install element-ui

   Nach dem Login kopieren

   Führen Sie als Nächstes Vue und Element-UI in der Vue-Eintragsdatei main.js ein und verwenden Sie die Methode Vue.use(), um Element-UI-Komponenten zu registrieren.

   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')

   Nach dem Login kopieren

   Zu diesem Zeitpunkt haben wir die Vorbereitungsarbeiten abgeschlossen und beginnen als Nächstes mit der Implementierung der Funktion zum Ziehen und Sortieren von Daten.

2. Datenliste implementieren
   Zuerst müssen wir eine Datenliste erstellen, um Datenelemente anzuzeigen, die gezogen und sortiert werden können. In Vue-Komponenten können Sie die v-for-Direktive verwenden, um die Datenliste zu durchlaufen, und die el-card-Komponente verwenden, um jedes Datenelement anzuzeigen.

   <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>

   Nach dem Login kopieren

   Jetzt haben wir die Anzeige der Datenliste abgeschlossen.

3. Drag-and-Drop-Funktion hinzufügen
   Als Nächstes fügen wir für jedes Datenelement eine Drag-and-Drop-Funktion hinzu. In Element-UI können Sie die el-draggable-Direktive verwenden, um die Drag-and-Drop-Funktion zu implementieren. Wir können die el-draggable-Direktive zur el-card-Komponente hinzufügen und eine Eigenschaft binden, die sich auf das Datenelement bezieht.

   <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>

   Nach dem Login kopieren

   In der el-draggable-Direktive setzen wir das Draggable-Attribut des Elements auf true, um die Drag-Funktionalität zu aktivieren. Anschließend speichern wir im Dragstart-Ereignis den Wert des aktuellen Datenelements als JSON-Zeichenfolge im DataTransfer-Objekt.

4. Sortierfunktion hinzufügen
   Zusätzlich zur Drag-and-Drop-Funktion müssen wir auch die Sortierfunktion implementieren, nachdem wir die Datenelemente an die angegebene Position gezogen haben. In Element-UI können Sie die Direktive el-dropzone verwenden, um die Sortierfunktion zu implementieren. Wir können die el-dropzone-Direktive zu dem Container hinzufügen, in dem sich die el-card-Komponente befindet, und eine Eigenschaft binden, die sich auf die Datenliste bezieht.

   <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>

   Nach dem Login kopieren

   In der el-dropzone-Direktive rufen wir die Methode „preventDefault“ im Dragover-Ereignis auf, um das standardmäßige Drag-and-Drop-Verhalten des Browsers zu verhindern. Dann holen wir uns im Drop-Ereignis das gezogene Datenelement und ermitteln anhand seiner ID seine Position in der ursprünglichen Datenliste. Anschließend erstellen wir eine neue Kopie der Datenliste, entfernen das gezogene Datenelement daraus und fügen das Datenelement an der angegebenen Stelle ein. Abschließend aktualisieren wir die Datenliste, indem wir die entsprechenden Datenattribute in der Vue-Instanz ändern.

5. Effektanzeige

Nach der Implementierung der oben genannten Schritte haben wir die Entwicklung der Funktionen zum Ziehen und Sortieren von Daten abgeschlossen. Jetzt können wir das Projekt ausführen und den Effekt sehen.

npm run serve

Öffnen Sie den Browser und besuchen Sie http://localhost:8080, um die Datenliste mit Drag-and-Drop- und Sortierfunktionen anzuzeigen.

Fazit:
In diesem Artikel wird detailliert beschrieben, wie Sie mit Vue und Element-UI Funktionen zum Ziehen und Sortieren von Daten implementieren. Durch die Verwendung der Direktiven el-draggable und el-dropzone können wir der Datenliste problemlos Zieh- und Sortierfunktionen hinzufügen. Ich hoffe, dass dieser Artikel Entwicklern, die Webanwendungen entwickeln, hilfreich sein wird, damit sie diese gemeinsame Funktion effizienter implementieren können.

Referenzlink:

• Offizielle Vue-Dokumentation: https://cn.vuejs.org/
• Offizielle Element-UI-Dokumentation: https://element.eleme.io/

Das obige ist der detaillierte Inhalt vonSo verwenden Sie Vue und Element-UI, um Funktionen zum Ziehen und Sortieren von Daten zu implementieren. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!