Vue implementiert einen beweglichen schwebenden Button

<div
 Klasse = "Rückruf-Float"
 @click="beimKlick"
 @mousedown="runter"
 @touchstart="nach unten"
 @mousemove="bewegen"
 @touchmove="bewegen"
 @mouseup="Ende"
 @touchend="Ende"
 ref="fu"
 >
 <!-- <p @click="callback">Zurück</p> -->
 <img @click="callback" src="@/assets/images/callbs.jpg" alt />
</div>

Daten() {
 zurückkehren {
  wird geladen: false,
  flags: false, //Position der Steuerung verwenden: {
  x: 0,
  y: 0,
  },
  nx: "",
  ny: "",
  dx: "",
  dy: "",
  xPum: "",
  yPum: "",
 };
 },

Methoden: {
 Rückruf() {
  dies.$router.go(-1);
 },
 beiAktualisieren() {
  // Fenster.Standort.neu laden();
  setzeTimeout((res) => {
  konsole.log(res);
  dies.isLoading = falsch;
  }, 1000);
 },
 runter() {
  dies.flags = wahr;
  var berühren;
  wenn (Ereignis.berührt) {
  berühren = Ereignis.Berührungen[0];
  } anders {
  Berührung = Ereignis;
  }
  diese.position.x = touch.clientX;
  diese.position.y = touch.clientY;
  dies.dx = dies.$refs.fu.offsetLeft;
  dies.dy = dies.$refs.fu.offsetTop;
 },
 bewegen() {
  wenn (diese.flags) {
  var berühren;
  wenn (Ereignis.berührt) {
   berühren = Ereignis.Berührungen[0];
  } anders {
   Berührung = Ereignis;
  }
  dies.nx = touch.clientX - diese.position.x;
  dies.ny = touch.clientY - diese.position.y;
  dies.xPum = dies.dx + dies.nx;
  dies.yPum = dies.dy + dies.ny;
  let width = window.innerWidth - this.$refs.fu.offsetWidth; //Bildschirmbreite minus Steuerelementbreite let height = window.innerHeight - this.$refs.fu.offsetHeight; //Bildschirmhöhe minus Steuerelementhöhe this.xPum < 0 && (this.xPum = 0);
  dies.yPum < 0 und (dies.yPum = 0);
  this.xPum > Breite && (this.xPum = Breite);
  this.yPum > Höhe && (this.yPum = Höhe);
  // wenn (this.xPum >= 0 && this.yPum >= 0 && this.xPum<= Breite &&this.yPum<= Höhe) {
  dies.$refs.fu.style.left = dies.xPum + "px";
  dies.$refs.fu.style.top = dies.yPum + "px";
  // }
  //Verhindert standardmäßig das Verschieben der Seite document.addEventListener(
   "Berührungsbewegung",
   Funktion () {
   event.preventDefault();
   },
   FALSCH
  );
  }
 },
 //Funktion wenn die Maus losgelassen wird end() {
  diese.flags = falsch;
 },
 beiKlick() {
  //Hier verwende ich dies als Unterkomponente this.$emit("click");
 },
 },

<Stilbereich>
.callback p {
 Schriftgröße: 16px;
 Farbe: #fff;
 Hintergrund: rgba(56, 57, 58, 0,5);
 Randradius: 50 %;
 Textausrichtung: zentriert;
 Breite: 50px;
 Höhe: 50px;
 Zeilenhöhe: 50px;
 Schriftfamilie: PingFang SC;
 Schriftstärke: 600;
 Kastenschatten: 0 0 10px #fff;
}
.callback img {
 Anzeige: Block;
 Breite: 50px;
 Höhe: 50px;
 Kastenschatten: 0 0 10px rgb(133, 129, 129);
 Randradius: 50 %;
 Hintergrund: #fff;
}
.rückruf {
 Position: fest;
 oben: 40px;
 links: 20px;
 Z-Index: 99999;
}
.schweben {
 Position: fest;
 rechts: 20px;
 oben: 60 %;
 Touch-Aktion: keine;
 Textausrichtung: zentriert;
 Breite: 50px;
 Höhe: 50px;
 Rahmenradius: 24px;
 Zeilenhöhe: 48px;
 Farbe: weiß;
}
</Stil>