So zeigen Sie das verbotene Symbol beim Ziehen in Vue an

Da die Front-End-Entwicklung immer beliebter wird, wird die Verwendung von JavaScript-Frameworks beim Schreiben von Websites oder Anwendungen immer beliebter. Vue.js ist eines der beliebtesten JavaScript-Frameworks auf dem Markt und bietet viele praktische Möglichkeiten zum Erstellen reaktionsfähiger und interaktiver Benutzeroberflächen. Die Implementierung der Drag-and-Drop-Funktion in Vue.js ist eine sehr häufige Anforderung. In diesem Artikel wird erläutert, wie Sie die Drag-and-Drop-Funktion in Vue.js verwenden und beim Ziehen das Verbotssymbol anzeigen.

Schritt 1: Installieren und importieren Sie das Vue.draggable-Plug-in

Das Vue.draggable-Plug-in ist ein sehr nützliches Plug-in, mit dem Sie Drag-and-Drop-Funktionen einfach in Vue implementieren können. Um dieses Plugin zu installieren, können Sie das npm-Paketverwaltungstool verwenden und den folgenden Befehl verwenden:

npm install vuedraggable --save

Nach Abschluss der Installation müssen Sie das Vue.draggable-Plugin in das Vue-Projekt importieren:

import draggable from 'vuedraggable'
Vue.component('draggable', draggable)

Schritt 2: Verwenden Sie die Drag-and-Drop-Funktion für die Vue.draggable-Implementierung

Nachdem Sie das Vue.draggable-Plugin erfolgreich installiert und importiert haben, werden wir es als Nächstes verwenden, um die Drag-and-Drop-Funktionalität zu implementieren. Zuerst müssen wir das Element definieren, das wir in die Vorlage ziehen möchten.

<template>
  <div>
    <div class="container">
      <div class="item" v-for="(item, index) in items" :key="index">
        {{ item }}
      </div>
    </div>
    <draggable :list="items" :options="{ handle:&#39;.handle&#39; }" @end="onEnd">
      <div class="draggable-item handle">{{ items }}</div>
    </draggable>
  </div>
</template>

In der obigen Vorlage haben wir das Vue.draggable-Plugin verwendet, um unsere Drag-and-Drop-Funktionalität zu implementieren. Wir definieren einen Container mit mehreren Elementen und jedes Element enthält einen Index und einen Wert im Array „items“. Wir definieren auch ein ziehbares Element, das wir per Drag-and-Drop in einen Container ziehen können.

Nachdem wir das Element definiert haben, müssen wir eine Methode definieren, um auf Drag-and-Drop-Ereignisse zu reagieren. Mit dieser Methode können wir überprüfen, ob das Drag-and-Drop-Ereignis außerhalb des Containers aufgetreten ist. Wenn ja, können wir ein Deaktivierungssymbol anzeigen.

methods: {
  onEnd(event) {
    const nodeList = document.querySelectorAll('.vuedraggable-container')
    const dragList = nodeList[0].getBoundingClientRect()
    const container = document.querySelector('.container').getBoundingClientRect()
    if (dragList.top < container.top || dragList.bottom > container.bottom) {
      event.preventDefault()
      console.log('Do not drop outside of the container!')
    }
  }
},

Bei dieser Methode ermitteln wir zunächst die Position des Containers und prüfen, ob das Drag-Ereignis außerhalb des Containers aufgetreten ist. Wenn ja, verwenden wir die Methode event.preventDefault(), um das Standardverhalten des Drag-and-Drop-Ereignisses zu verhindern und eine Warnmeldung auszugeben.

Das Letzte, was Sie bei der Code-Implementierung beachten sollten, ist das Hinzufügen eines Stils zum Container.

.container {
  display: flex;
  flex-wrap: wrap;
  height: 300px;
  border: 1px solid #ccc;
  padding: 10px;
}
.item {
  flex: 1;
  margin: 5px;
  padding: 10px;
  background: #eee;
  text-align: center;
  cursor: move;
}
.draggable-item {
  margin: 5px;
  padding: 10px;
  background: #7a7a7a;
  color: #fff;
  text-align: center;
  cursor: move;
}

Hier definieren wir einen Containerstil und einen Artikelstil. Wir haben auch Stile für ziehbare Elemente hinzugefügt.

Jetzt haben wir die Drag-and-Drop-Funktionalität in Vue.js erfolgreich implementiert. Wenn ein Element gezogen wird, wird ein Deaktivierungssymbol angezeigt. Dies ist eine einfache Möglichkeit, eine sehr häufige Anforderung zu implementieren, und mit Vue.js und seinen Plug-Ins können wir komplexe Drag-and-Drop-Funktionen einfacher implementieren.

Das obige ist der detaillierte Inhalt vonSo zeigen Sie das verbotene Symbol beim Ziehen in Vue an. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!