Vue verwendet Drag & Drop, um einen Strukturbaum zu erstellen

<Vorlage>
  <div Klasse="Container">
    <div Klasse="Knoten-Container">
      <div v-for="(Element, Index) in Knotenliste"
           :Schlüssel="Index"
           Klasse="Quellknoten"
           ziehbar="true"
           @dragstart="dragStart(Element)">
        {{ Artikel }}
      </div>
    </div>
    <div Klasse="Baumcontainer"
         @dragover="erlaubenAblegen"
         @drop="handleDrop">
      <Baumknoten v-if="Knotendaten"
                 ref="Knoten"
                 :nodeData="nodeData"
                 @delete-node="Baum löschen" />
    </div>
  </div>
</Vorlage>
<Skript>
importiere TreeNode aus './treeNode.vue'
importiere { Node } aus './config.js'
Standard exportieren {
  Name: "vue-tree",
  Komponenten:
    Baumknoten
  },
  // Abkömmlinge können keine Knotendaten abrufen, das heißt, sie können keine Knoten unabhängig voneinander erstellen. Daher wird die Knotenerstellungsmethode des Vorgängerknotens den Abkömmlingen bereitgestellt () {
    zurückkehren {
      Knoten erstellen: dieser.Knoten erstellen
    }
  },
  Daten () {
    zurückkehren {
      Knotenliste: ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9'],
      aktueller Knoten: null,
      nodeData: null
    }
  },
  Methoden: {
    // Ziehen beginnen und Knotendaten abrufen dragStart (item) {
      this.currNode = Element
    },
    // Wenn der Stammknoten nicht generiert wird, ist Ziehen zulässigallowDrop (Ereignis) {
      wenn (!this.nodeData) {
        Ereignis.preventDefault()
      }
    },
    //Ziehen endet, generieren Knoten handleDrop () {
      wenn (!this.nodeData) {
        dies.nodeData = dies.createNode()
      }
    },
    Knoten erstellen () {
      let node = neuer Knoten(dieser.aktuellerKnoten)
      Rückgabeknoten
    },
    // Lösche den Wurzelknoten und lösche den gesamten Baum deleteTree () {
      this.nodeData = null
    }
  }
}
</Skript>
<style lang="scss" scoped>
.container {
  Polsterung: 20px;
  Breite: berechnet (100 % – 40 Pixel);
  Höhe: berechnet (100 % – 40 Pixel);
  .Knotencontainer {
    Höhe: 100px;
    Rand: 1px gestrichelt rot;
    Anzeige: Flex;
    .Quellknoten {
      Breite: 50px;
      Höhe: 30px;
      Hintergrund: #fff;
      Rand: 1px durchgehend blau;
      Textausrichtung: zentriert;
      Zeilenhöhe: 30px;
      Rand: 10px;
      Cursor: Zeiger;
    }
  }
  .Baumcontainer {
    Höhe: berechnet (100 % – 122 Pixel);
    Rand oben: 20px;
  }
}
</Stil>

Exportklasse Node{
  Konstruktor(Name){
    dieser.name = Name,
    dies.Kinder = []
  }
}

<Vorlage>
  <!-- 
    Struktur: Die äußerste Schicht ist die innere Knotenebene. Jede innere Knotenebene enthält einen Knoten und eine Knotenbox. Der Knoten speichert den aktuellen Knoten und die Knotenbox speichert alle untergeordneten Knoten des aktuellen Knotens. Wenn der aktuelle Knoten mehrere untergeordnete Knoten hat, gibt es in der Knotenbox mehrere Knoteneingänge und so weiter.
        <Knoten></Knoten>
        <Knotenbox>
          <innerer Knoten>
            <Knoten></Knoten>
            <Knotenbox>…</Knotenbox>
          </node-inner>
          <innerer Knoten>
            <Knoten></Knoten>
            <Knotenbox>…</Knotenbox>
          </node-inner>
          ...
        </Knotenbox>
      </node-inner>
   -->
  <div Klasse="node-inner">
    <div Klasse="Knoten"
         :Klasse="{ 'drag-over-node': isDragover }"
         @dragover="Überziehen"
         @dragleave="ziehenVerlassen"
         @drop="nodeDrop">
      <span class="name">{{nodeData.name}}</span>
      <span Klasse="del"
            @click="deleteNode">Löschen</span>
    </div>
    <div v-show="nodeData.children.length > 0"
         Klasse="Knotenbox">
      <tree-node v-for="(Element, Index) in nodeData.children"
                 :Schlüssel="Index"
                 :nodeData="Element"
                 @delete-node="Untergeordnetes Element löschen(index)" />
    </div>
  </div>
</Vorlage>
<Skript>
Standard exportieren {
  Name: 'Baumknoten',
  Requisiten: {
    KnotenDaten: {
      Typ: Objekt,
      Standard: () => { }
    }
  },
  // Die vom Vorgängerknoten übergebenen Daten abrufen inject: ['createNode'],
  Daten () {
    zurückkehren {
      isDragover: false
    }
  },
  Methoden: {
    // Der Knoten erlaubt Ziehen, um untergeordnete Knoten hinzuzufügen dragOver (Ereignis) {
      Ereignis.preventDefault()
      wenn (!this.isDragover) {
        this.isDragover = true
      }
    },
    ziehenHinterlassen() {
      wenn (dies.istDragover) {
        this.isDragover = falsch
      }
    },
    // Dem Knoten untergeordnete Knoten hinzufügen nodeDrop () {
      Knoten = this.createNode()
      dies.nodeData.children.push(Knoten)
      this.isDragover = falsch
    },
    // Den aktuellen Knoten löschen, was im Wesentlichen bedeutet, ihn an den übergeordneten Knoten zu übergeben, um den untergeordneten Knoten zu löschen deleteNode () {
      dies.$emit("Knoten löschen")
    },
    // Erhalte die Anweisung zum Löschen des untergeordneten Knotens und führe die Löschfunktion aus deleteChild (index) {
      dies.nodeData.children.splice(index, 1)
    }
  }
}
</Skript>
<style lang="scss" scoped>
.Knoten {
  Rand: 1px durchgehend orange;
  Rahmenradius: 4px;
  Position: relativ;
  Anzeige: Inline-Flex;
  Elemente ausrichten: zentrieren;
  Inhalt ausrichten: Abstand dazwischen;
  Hintergrundfarbe: #fff;
  Höhe: 36px;
  Polsterung: 0 12px 0 16px;
  Zeilenhöhe: 36px;
  Rand unten: 10px;
  .Name {
    Schriftgröße: 16px;
    Rand rechts: 12px;
  }
  .del {
    Farbe: rot;
    Schriftgröße: 12px;
    Cursor: Zeiger;
  }
  &.über-Knoten ziehen {
    Kastenschatten: 6px 6px 12px rgba (106, 20, 134, 0,15);
  }
}
.Knotenbox {
  Anzeige: Inline-Flex;
  Flex-Richtung: Spalte;
  .node-inner {
    Rand links: 80px;
    // Verbinde die vertikalen Balken&:not(:last-child):before {
      Position: absolut;
      links: -70px;
      oben: 22px;
      Rand: 1px durchgehend orange;
      Inhalt: "";
      Breite: 8px;
      Hintergrundfarbe: #fff;
      Farbe des unteren Rahmens: #fff;
      Höhe: 100%;
      Farbe des oberen Rahmens: #fff;
      Z-Index: 3;
    }
    // Horizontalen Balken verbinden&:after {
      links: -61px;
      Breite: 60px;
      Inhalt: "";
      Position: absolut;
      oben: 14px;
      Höhe: 8px;
      Rand: 1px durchgehend orange;
      Inhalt: "";
      Hintergrundfarbe: #fff;
      Rahmenfarbe rechts: #fff;
      Rahmenfarbe links: #fff;
      Z-Index: 3;
    }
    // Der letzte vertikale Balken hat eine abgerundete Ecke &:nth-last-child(2):before {
      Rahmen unten links – Radius: 6px;
      Farbe der unteren Umrandung: orange;
    }
    // Der erste horizontale Balken wird erweitert &:first-child:after {
      links: -81px;
      Breite: 80px;
      Z-Index: 2;
    }
  }
}
.node-inner {
  Position: relativ;
}
</Stil>