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:

d477f9ce7bf77f53fbcf36bec1b69b7a
dc6dce4a544fdca2df29d5ac0ea9906b

<div class="drag-sort-demo">
  <el-collapse-transition>
    <div v-for="item in list" :key="item.id" class="drag-item" :class="{ 'dragging': draggingId === item.id }" draggable="true" @dragstart="handleDragStart(item)" @dragend="handleDragEnd(item)">
      {{ item.name }}
    </div>
  </el-collapse-transition>
</div>
<el-button type="primary" @click="handleSort">保存排序</el-button>

16b28748ea4df4d9c2150843fecfba68
21c97d3a051048b8e55e3c8f199a54b2

3f1c4e4b6b16bbbd69b2ee476dc4f83a
export default {
data () {

return {
  list: [
    { id: 1, name: 'A' },
    { id: 2, name: 'B' },
    { id: 3, name: 'C' },
    { id: 4, name: 'D' },
    { id: 5, name: 'E' },
  ],
  draggingId: null,
};

},
Methoden: {

handleDragStart(item) {
  this.draggingId = item.id;
},
handleDragEnd() {
  this.draggingId = null;
},
handleSort() {
  const sortedList = Array.from(this.$el.querySelectorAll('.drag-item')).map((el, index) => {
    const id = el.getAttribute('data-id');
    const name = el.textContent;
    return { id, name, sort: index + 1 };
  });
  // 将排序后的列表保存到数据库或发送给后端
},

},
};
2cacc6d41bbb37262a98f745aa00fbf0

c2860dbf0fe9f551910eda5bb93d65bb
.drag-sort-demo {
display: flex;
flex-wrap : wrap ;
}

.drag-item {
padding: 10px;
margin: 10px 0;
background-color: #f5f5f5;
border: 1px solid #ebebeb;
cursor: move;
übergang: box-shadow 0,3s ;
}

.drag-item.dragging {
box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
}
531ac245ce3e4fe3d50054a55f265927

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:

d477f9ce7bf77f53fbcf36bec1b69b7a
2e4c03ba1a844f9ccaa1fdeb1b48713f

<drag-sort-demo></drag-sort-demo>

16b28748ea4df4d9c2150843fecfba68

3f1c4e4b6b16bbbd69b2ee476dc4f83a
import DragSortDemo from './components/DragSortDemo.vue';

export default {
Components: {

DragSortDemo,

},
};
2cacc6d41bbb37262a98f745aa00fbf0

3. Ausführen Das Projekt
Führen Sie den folgenden Befehl in der Befehlszeile aus, um das Projekt zu starten:

npm run Serve

Besuchen Sie http://localhost:8080, um die Demonstrationsseite der Drag-and-Drop-Sortierfunktion anzuzeigen. Ziehen Sie die Listenelemente, um die Sortierung zu ändern, und klicken Sie auf die Schaltfläche „Sortierung speichern“, um die Sortierergebnisse zu speichern.

Fazit:
Durch die oben genannten Schritte haben wir die Drag-and-Drop-Sortierfunktion mit Vue und Element-UI erfolgreich implementiert. Dies stellt eine einfache und praktische Lösung für unsere Webentwicklung dar, die das Benutzererlebnis verbessern und die Schnittstelleninteraktion optimieren kann. Ich hoffe, dass dieser Artikel für die Front-End-Entwicklungsarbeit aller hilfreich sein kann.

Das obige ist der detaillierte Inhalt vonSo verwenden Sie Vue und Element-UI zur Implementierung der Drag-and-Drop-Sortierfunktion. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!