Vue implementiert ein verschiebbares Baumstrukturdiagramm

Ich habe vor Kurzem Vue verwendet, um ein kleines Projekt zu erstellen – ein verschiebbares Baumstrukturdiagramm.

Rekursive Vue-Komponente

Die Struktur wird durch rekursive Komponenten von Vue implementiert

Das Layout verwendet Flex und die Strukturlinien werden durch CSS-Pseudoklassen implementiert

Es ist zu beachten, dass bei einem zentrierten Layout, wenn sich zu viele Elemente auf der X-Achse befinden und die Breite der untergeordneten Elemente die Ansicht überschreitet, zwar eine Bildlaufleiste vorhanden ist, nachdem das Element zentriert wurde, diese aber nur den Inhalt auf der rechten Seite erreichen kann und der Inhalt auf der linken Seite nicht zugänglich ist. Sie können das übergeordnete Element auf Inline-Flex und die Breite auf Auto einstellen. Natürlich wird es dieses Problem nicht geben, wenn es sich um die obige Struktur handelt, aber beim Rendern großer Datenmengen hat es mich trotzdem einen Nachmittag lang gestört.

Drag-Ereignis

Binden Sie zunächst das Draggable-Attribut an das Element, das Sie ziehen möchten. Mit Ausnahme der Tags <a> und <img>, die standardmäßig auf true gesetzt sind, müssen alle anderen Elemente wie folgt gesetzt werden

Dann gibt es drei Ereignisse: dragend , dragover und drop (in Vue geschrieben, also nicht vor dem Ereignis hinzufügen)

Beachten Sie, dass dragover das Standardverhalten entfernen und $event.preventDefault() im Ereignis angeben muss. Andernfalls wird beim Ziehen der Maus ein 🚫-Zeichen angezeigt, wodurch das Ziehen ungültig wird.

Um den Wert des gezogenen Elements an die abgelegte Position zu übertragen, müssen Sie $event.dataTransfer.setData("node", transNodeData) verwenden.

"node" entspricht dem Variablennamen der zu übergebenden Daten und muss JSON.stringify() sein.

Methoden:{
    ziehenstart(e,nodeObj){
      console.log('🐉beweglicher Punkt ziehen',nodeObj.name,);
      let transData = JSON.stringify(nodeObj) //Die per Drag & Drop übergebenen Daten werden zunächst in das JSON-Format umgewandelt e.dataTransfer.setData("node", transData)
    },
    dragover(e){
      e.preventDefault()
    },
    fallenlassen(e,Knotenobjekt){
      console.log('🐉abgelegt auf',nodeObj.name);
      let getData = JSON.parse( e.dataTransfer.getData("Knoten"))
      console.log('Daten abrufen',getData);
    }
  }

Wenn Sie dies wissen, müssen Sie als Nächstes die erfassten Drag-Point-Daten in das children Array des Platzierungspunkts einfügen und den Drag-Point im dragend -Ereignis aus dem children Array des übergeordneten Knotens löschen. Der Index des Knotens wird abgerufen, wenn dragstart -Ereignis ausgelöst wird, und über eventBus Komponente an dragend übergeben ( Vuex kann auch verwendet werden).

Erstellen Sie einen Bus-Ordner und eine neue Datei index.js

Vue von „vue“ importieren
const busEvent = neuer Vue({
  Daten(){
    zurückkehren {
      dragNodeIndex:-1, //Der Index des Drag-Knotens im übergeordneten Knoten-Children-Array
    }
  },
  erstellt(){
    this.$on("transDragNodeIndex", res=>{//Um $emit über $on zu überwachen, müssen Sie sicherstellen, dass das benutzerdefinierte Ereignis überwacht wird, bevor es ausgelöst wird, d. h. das Abonnement geht der Veröffentlichung voraus, da die Daten sonst nicht überwacht werden können. Ich habe eventBus nicht oft verwendet, daher ist dies eine Falle this.dragNodeIndex=res
    })
  }
})

Standard-Busereignis exportieren

Führen Sie eventBus in die Komponente ein. Nachdem das benutzerdefinierte Ereignis über $emit in dragstart ausgelöst wurde, kann $on diese Daten empfangen. In dragend können Sie diesen Index über eventBus abrufen und ihn dann aus dem Array löschen.

Der nächste Schritt besteht darin, einige logische Urteile zu fällen. Wenn beispielsweise ein übergeordneter Knoten nicht auf einen untergeordneten Knoten gezogen werden kann, durchlaufen Sie zunächst rekursiv die Namen aller untergeordneten Knoten auf dem übergeordneten Knoten in ein Array. Wenn sich name der Ablageposition im Array befindet, bedeutet dies, dass der übergeordnete Knoten auf den untergeordneten Knoten gezogen wird und der Status auf „true“ gesetzt wird.

ifFatherDragToSon(dragObj,dropObj){//Beurteilen, ob der übergeordnete Knoten zum untergeordneten Knoten verschoben wurdeif (dragObj.children.length === 0) return false;
      lass newArr = [];
      Funktion getAllName(dragObj) {
        neuesArr.push(...dragObj.children);
        wenn (dragObj.children.length === 0) {
          zurückkehren;
        } anders {
          für (lass i = 0; i < dragObj.children.length; i++) {
            getAllName(dragObj.children[i]);
          }
        }
      }
      getAllName(dragObj);
      wenn (newArr.includes(dropObj)) {
        gibt true zurück;
      }
      gibt false zurück;
    }

Verwenden Sie eventBus , um den Status dragend Ereignisses abzurufen, und kehren Sie direkt zurück, wenn es true ist

Auch das Ziehen auf sich selbst funktioniert nicht, einfach direkt zurückkehren. Unter dem Punkt „Li Hu Chong“ wird ein untergeordneter Knoten hinzugefügt, hauptsächlich um zu überprüfen, ob die Adresse des Knotens im Stapel zur Beurteilung verwendet wird und nicht auf name basiert.

Erwähnenswert ist auch $event.dataTransfer.dropEffect im Drag-Ereignis. Die Werte, die abgerufen werden können, sind move , copy , none , link . In der folgenden Abbildung verschwindet der Drag-Punkt, wenn dropEffect 🚫 ist. Tatsächlich wird der Code im dragend -Ereignis ausgeführt, während der Code im drop -Ereignis nicht ausgeführt wird. Daher erfordert dieser Schritt zunächst eine Prozesskontrolle. Darüber hinaus ist auch der Standard- dropEffect in verschiedenen Browsern unterschiedlich, beispielsweise beim 360-Browser.

Code-Verbindung

Oben finden Sie den detaillierten Inhalt der Implementierung eines verschiebbaren Baumstrukturdiagramms durch Vue. Weitere Informationen zur Implementierung eines Baumstrukturdiagramms durch Vue finden Sie in den anderen verwandten Artikeln auf 123WORDPRESS.COM!