So implementieren Sie verschiebbare Komponenten in Vue

<Vorlage>
  <div
    ref="Verpackung"
    Klasse = "Drag-Bar-Wrapper"
  >
    <div
      ref="Überschrift"
      Klasse = "Drag-Bar-Header"
    >
      <!-- Kopfbereich -->
      <slot name="header" />
    </div>
    <div Klasse="Drag-Bar-Inhalt">
      <!-- Hauptinhaltsbereich -->
      <slot name="Standard" />
    </div>
    <div Klasse="Drag-Bar-Fußzeile">
      <!-- Unterer Bereich -->
      <slot name="Fußzeile" />
    </div>
  </div>
</Vorlage>
 
<Skript>
Standard exportieren {
  Daten() {
    zurückkehren {
      wrapperDom: null,
      headerDom: null,
 
      disX: 0,
      disY: 0,
 
      minLinks: 0,
      maxLinks: 0,
 
      minTop: 0,
      maxTop: 0,
 
      vorherigeLinks: 0,
      vorherigerTop: 0,
    };
  },
  Methoden: {
    initDrag() {
      dies.wrapperDom = dies.$refs.wrapper;
      dies.headerDom = dies.$refs.header;
      this.headerDom.addEventListener('mousedown', this.onMousedown, false);//Klicken Sie auf den Kopfbereich und ziehen Sie},
    bei Mausklick(e) {
      this.disX = e.clientX - this.headerDom.offsetLeft;
      this.disY = e.clientY - this.headerDom.offsetTop;
 
      dies.minLeft = dies.wrapperDom.offsetLeft;
      dies.minTop = dies.wrapperDom.offsetTop;
 
      dies.maxLeft =
        Fenster.innereBreite – dies.minLeft – dies.wrapperDom.offsetWidth;
      dies.maxTop =
        Fenster.innereHöhe – dies.minTop – dies.wrapperDom.offsetHeight;
 
      const { links, oben } = getComputedStyle(this.wrapperDom, false);
      dies.prevLeft = parseFloat(links);
      dies.prevTop = parseFloat(oben);
 
      document.addEventListener('mousemove', this.onMousemove, false);
      document.addEventListener('mouseup', this.onMouseup, false);
      document.body.style.userSelect = 'none'; //Beseitigt die Störung des ausgewählten Textes beim Ziehen},
    beiMausbewegung(e) {
      lass links = e.clientX - this.disX;
      let top = e.clientY - this.disY;
 
      wenn (-links > dies.minLinks) {
        links = -this.minLeft;
      } sonst wenn (links > this.maxLeft) {
        links = dies.maxLeft;
      }
 
      wenn (-top > dies.minTop) {
        oben = -this.minTop;
      } sonst wenn (oben > dies.maxTop) {
        oben = dies.maxTop;
      }
 
      dies.wrapperDom.style.left = dies.prevLeft + left + 'px';
      dies.wrapperDom.style.top = dies.prevTop + top + 'px';
    },
    bei Mauszeigerhoch() {
      document.removeEventListener('mousemove', this.onMousemove, false);
      document.removeEventListener('mouseup', this.onMouseup, false);
      document.body.style.userSelect = 'auto'; //Text wiederherstellen, sodass er auswählbar ist},
  },
  montiert() {
    dies.initDrag();
  }
};
</Skript>
 
<Stilbereich>
.drag-bar-wrapper {
  Position: fest;
  Z-Index: 2;
  oben: 50 %;
  links: 50%;
  transformieren: übersetzen(-50 %, -50 %);
  Anzeige: Flex;
  Flex-Richtung: Spalte;
}
.drag-bar-header {
  Hintergrundfarbe: #eee;
  Cursor: bewegen; /*Mausstil ziehen*/
}
.drag-bar-content {
  Hintergrundfarbe: #fff;
}
.drag-bar-footer {
  Hintergrundfarbe: #fff;
}
</Stil>