vue + ts realisiert den Effekt des Ziehens von Elementen mit der Maus

// clientX ist die X-Achsenkoordinate der Maus relativ zur oberen linken Ecke des Browsers; sie ändert sich nicht mit der Bildlaufleiste;
// clientY Die Koordinate der Maus auf der Y-Achse relativ zur oberen linken Ecke des Browsers; ändert sich nicht mit der Bildlaufleiste;
//element.offsetTop bezeichnet die Distanz zwischen Element und oberem bzw. oberstem Steuerelement, Ganzzahl, Einheit Pixel.
// element.offsetLeft bezieht sich auf die Position des Elements vom linken oder oberen Steuerelement, Ganzzahl, Einheit Pixel.
// element.offsetWidth bezieht sich auf die Breite des Elementsteuerelements selbst, Ganzzahl, Einheit Pixel.
// element.offsetHeight bezieht sich auf die Höhe des Elementsteuerelements selbst, Ganzzahl, Einheit Pixel.
// clientHeigh = Höhe + obere und untere Polsterung
// Clientbreite = Breite + linke und rechte Polsterung

<Vorlage>
  <div Klasse="Aufgabenliste" ref="parentBox">
    <div Klasse="Suchtitel">
      <h1 Klasse = "Fettdruck der linken Box hinzufügen" Stil = "Margin-left:35px">
        <a-icon type="unordered-list" style="margin-right: 10px;" />Element ziehen</h1>
    </div>
    <a-button ref="moveBtn" style="Breite: 100px;Höhe: 40px;Übergang: keine" Klasse="move-btn" Typ="primär"
      >Schaltfläche ziehen</a-Schaltfläche
    >
  </div>
</Vorlage>

<script lang="ts">
importiere { Komponente, Emit, Inject, Prop, Ref, Vue, Watch } von „vue-property-decorator“;

@Komponente({
  Komponenten: {},
})
exportiere Standardklasse BriberyInformation erweitert Vue {
  @Ref() schreibgeschützt moveBtn;
  @Ref() schreibgeschützte übergeordnete Box;

  btnDown() {
    let box = this.moveBtn.$el; //DOM-Element der Schaltfläche abrufen let parentBox = this.parentBox; //DOM-Element der Schaltfläche abrufen let parentH = parentBox.clientHeight; //Höhe des übergeordneten Elements der Schaltfläche abrufen
    let parentW = parentBox.clientWidth; //Breite des übergeordneten Schaltflächenelements abrufen

    sei x, y;
    let moveX, moveY; //Bewegungsdistanzlet maxX, maxY; //maximale Bewegungsdistanzlet isDrop = false;

    box.onmousedown = e => {
      x = e.clientX – box.offsetLeft; // e.clientX Mauskoordinate relativ zur X-Achse der oberen linken Ecke des Browsers – die Position des oberen Steuerelements der Schaltfläche y = e.clientY – box.offsetTop;
      istDrop = wahr;
    };
    document.onmousemove = e => {
      wenn (istDrop) {
        e.preventDefault();
        moveX = e.clientX - x; //Bewegungsdistanz von der linken Seite abrufen moveY = e.clientY - y; //Bewegungsdistanz von oben abrufen //Maximale Bewegungsdistanz maxX = parentW - box.offsetWidth;
        maxY = parentH - box.offsetHeight;

        //Berechnung der effektiven Bewegungsdistanz //console.log(Math.min(-1, 4, 6, 12)); //Ausgabe -1-----Mehrere Parameter, gibt den Mindestwert zurück moveX = Math.min(maxX, Math.max(0, moveX));

        bewegeY = Math.min(maxY, Math.max(0, bewegeY));
        box.style.left = moveX + "px";
        box.style.top = moveY + "px";
      } anders {
        zurückkehren;
      }
    };
    document.onmouseup = e => {
      e.preventDefault();
      isDrop = falsch;
    };
  }

  montiert() {
    dies.btnDown();
  }
}
</Skript>
<style scoped lang="weniger">
.To-Do-Liste {
  Position: relativ;
  Mindesthöhe: 600px;
  maximale Höhe: 600px;
  Breite: 600px;
  Überlauf: versteckt;
  Rand: 2px tief schwarz;
  .move-btn {
    Position: absolut;
  }
}
</Stil>