Vue implementiert Drag & Drop für mehrspaltiges Layout

<drag-box style="Breite: 100 %; Höhe: 100 %;">
   <drag-item>Element1</drag-item>
   <drag-item>Element2</drag-item>
   <drag-item>Element3</drag-item>
   <drag-item>Element4</drag-item>
</Drag-Box>

<Vorlage>
    <div ref='dragBox' style='Anzeige: flex; Breite: 100 %; Höhe: 100 %;'>
        <Steckplatz></Steckplatz>
    </div>
</Vorlage>

<Vorlage>
    <div ref="Container" Klasse="d-flex" Stil="min-width: 200px; Position: relativ;">
        <div style="Breite: 100 %; Höhe: 100 %;">
            <slot>Standardinformationen</slot>
        </div>
  <!-- Zugleiste -->
        <div v-if="Größe ändernAnzeigen" class="Größe ändern" />
    </div>
</Vorlage>
<Skript>
Standard exportieren {
  Requisiten: {
  // Steuert, ob die Ziehleiste angezeigt wird. Standardmäßig wird resizeShow: { angezeigt.
      Typ: Boolean,
      Standard: true
    }
  }
}
</Skript>
<Stil>
.Größe ändern {
    Position: absolut;
    oben: 0;
    rechts: 0;
    Breite: 4px;
    Höhe: 100%;
    Cursor: Spaltengröße ändern;
    Hintergrundfarbe: #d6d6d6;
}
</Stil>

 // Wenn dragItem keine Breite definiert, flex=1
    setDragItemFlex () {
      const dragBox = this.$refs.dragBox
      const childrenLen = dragBox.children.length

      für (sei i = 0; i < Kinderlänge; i++) {
        const node = dragBox.Kinder[i]
        wenn (!node.style.width) {
          // Wenn die Breite nicht definiert ist, ist Flex=1
          node.style.flex = 1
        }
      }
    },

dragControllerDiv () {
  const resize = document.getElementsByClassName('resize') // Drag Bar // Schleife zum Hinzufügen von Ereignissen für jede Drag Bar for (let i = 0; i < resize.length; i++) {
    // Mausklick-Ereignis resize[i].addEventListener('mousedown', this.onMouseDown)
  }
},

beiMausDrücken (e) {
  diese.resizeBox = e.target
  this.currentBox = this.resizeBox.parentNode // Aktuelle Box this.rightBox = this.getNextElement(this.currentBox) // Nächster Geschwisterknoten der aktuellen Box if (!this.rightBox) return
  this.curLen = this.currentBox.clientWidth
  this.otherBoxWidth = this.$refs.dragBox.clientWidth - this.currentBox.clientWidth - this.rightBox.clientWidth // Breite anderer Boxen // Erinnerung an Farbänderung this.resizeBox.style.background = '#818181'
  this.startX = e.clientX
  document.addEventListener('Mausbewegung', this.onMousemove)
  document.addEventListener('mouseup', this.onMouseup)
},

// Hole das nächste Geschwisterelement kompatible Funktion getNextElement (Element) {
  wenn (element.nächstesElementGeschwister) {
    returniere element.nextElementSibling
  } anders {
    var next = element.nextSibling // Nächster Geschwisterknoten while (next && next.nodeType !== 1) { // Er existiert, aber es ist nicht das, was ich will next = next.nextSibling
    }
    Zurück Weiter
  }
}

beiMausbewegung (e) {
  const endX = e.clientX
  const moveLen = endX - this.startX // (endx-startx) = Bewegungsdistanz const CurBoxLen = this.curLen + moveLen // resize[i].left + Bewegungsdistanz = endgültige Breite des linken Bereichs const rightBoxLen = this.$refs.dragBox.clientWidth - CurBoxLen - this.otherBoxWidth // Rechte Breite = Gesamtbreite - linke Breite - Breite der anderen Box // Wenn die Mindestbreite erreicht ist, ist Ziehen nicht verfügbar if (CurBoxLen <= 200 || rightBoxLen <= 200) return
  this.currentBox.style.width = CurBoxLen + 'px' // Aktuelle Boxbreite this.resizeBox.style.left = CurBoxLen // Breite des linken Bereichs festlegen this.rightBox.style.width = rightBoxLen + 'px'
},

bei Mauszeiger hoch () {
 // Farbwiederherstellung this.resizeBox.style.background = '#d6d6d6'
 document.removeEventListener('mousedown', this.onMouseDown)
 document.removeEventListener('Mausbewegung', this.onMousemove)
},

montiert () {
  dies.setDragItemFlex()
  dies.dragControllerDiv()
},

<Vorlage>
  <div id="app" style="Breite: 100 %; Höhe: 100vh; Rahmen: 1px durchgezogen #ccc;">
    <drag-box style="Breite: 100 %; Höhe: 100 %;">
      <drag-item style="width: 20%;">Artikel1</drag-item>
      <drag-item>Element2</drag-item>
      <drag-item style="width: 20%;" :resizeShow='false'>Artikel3</drag-item>
    </Drag-Box>
  </div>
</Vorlage>

<Skript>
importiere {DragBox, DragItem} aus './components/dragLayouter'

Standard exportieren {
  Name: "App",
  Komponenten:
    Ziehen Sie die Box,
    Ziehen Sie ein Element
  }
}
</Skript>