So verwenden Sie Vue und Element-UI zur Implementierung der Drag-and-Drop-Sortierfunktion

So implementieren Sie die Drag-and-Drop-Sortierfunktion mit Vue und Element-UI

Vorwort:
In der Webentwicklung ist die Drag-and-Drop-Sortierfunktion eine gängige und praktische Funktion. In diesem Artikel wird die Verwendung von Vue und Element-UI zum Implementieren der Drag-and-Drop-Sortierfunktion vorgestellt und der Implementierungsprozess anhand von Codebeispielen demonstriert.

1. Umgebungseinrichtung

1. Node.js installieren
   Bevor Sie beginnen, müssen Sie Node.js installieren. Sie können https://nodejs.org/ besuchen, um die dem Betriebssystem entsprechende Version herunterzuladen und zu installieren.
2. Vue CLI installieren
   Vue CLI ist ein Tool zum schnellen Erstellen von Vue-Projekten. Öffnen Sie das Befehlszeilentool und führen Sie den folgenden Befehl aus, um Vue CLI zu installieren:

npm install -g @vue/cli

3. Vue-Projekt erstellen
   Führen Sie den folgenden Befehl in der Befehlszeile aus, um ein neues Vue-Projekt zu erstellen:

vue create drag -sort-demo

Folgen Sie den Anweisungen, um Konfigurationsoptionen auszuwählen, und warten Sie, bis das Projekt erstellt wird.

4. Element-UI installieren
   Geben Sie das gerade erstellte Vue-Projektverzeichnis ein und führen Sie den folgenden Befehl in der Befehlszeile aus, um Element-UI zu installieren:

npm install element-ui

2 Implementieren Sie Drag-and-Drop Sortierfunktion

1. Import Element -UI
   Importieren Sie die Stile und Komponenten von Element-UI in der Eintragsdatei src/main.js des Vue-Projekts:

import Vue from 'vue';
import ElementUI from 'element- ui';
import 'element-ui /lib/theme-chalk/index.css';

Vue.use(ElementUI);

2. Eine Demo-Komponente erstellen
   Eine neue Komponente erstellen DragSortDemo.vue in src/components Verzeichnis, um die Drag-and-Drop-Sortierfunktion zu demonstrieren. Bearbeiten Sie die Datei DragSortDemo.vue und fügen Sie den folgenden Code hinzu:

<script><br>export default {<br> data () {</p><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class='brush:php;toolbar:false;'>return { list: [ { id: 1, name: 'A' }, { id: 2, name: 'B' }, { id: 3, name: 'C' }, { id: 4, name: 'D' }, { id: 5, name: 'E' }, ], draggingId: null, };</pre><div class="contentsignin">Nach dem Login kopieren</div></div><p>},<br> Methoden: {</p><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class='brush:php;toolbar:false;'>handleDragStart(item) { this.draggingId = item.id; }, handleDragEnd() { this.draggingId = null; }, handleSort() { const sortedList = Array.from(this.$el.querySelectorAll('.drag-item')).map((el, index) =&gt; { const id = el.getAttribute('data-id'); const name = el.textContent; return { id, name, sort: index + 1 }; }); // 将排序后的列表保存到数据库或发送给后端 },</pre><div class="contentsignin">Nach dem Login kopieren</div></div><p>},<br>};<br></script>

Erklärung:

• Im Vorlage: Verwenden Sie die v-for-Direktive, um Listenelemente dynamisch zu rendern. Die Klasse des Listenelements ist an eine berechnete Eigenschaft gebunden, die verwendet wird, um zu bestimmen, ob das aktuell gezogene Element das Listenelement ist.
• Fügen Sie das Draggable-Attribut zu jedem Listenelement hinzu und registrieren Sie die Dragstart- und Dragend-Ereignishandler, um die Drag-Start- bzw. End-Ereignisse auszulösen. Die
• handleSort-Methode speichert oder sendet die per Drag-and-Drop sortierten Listendaten zur Verarbeitung an das Backend.

3. Komponenten verwenden
   Verwenden Sie die DragSortDemo-Komponente in der Datei src/App.vue: