Vueは移動可能なフローティングボタンを実装します

<div
 class="コールバックフロート"
 @click="クリック時"
 @mousedown="下"
 @touchstart="下"
 @mousemove="移動"
 @touchmove="移動"
 @mouseup="終了"
 @touchend="終了"
 ref="fu"
 >
 <!-- <p @click="callback">戻る</p> -->
 <img @click="コールバック" src="@/assets/images/callbs.jpg" alt />
</div>

データ（） {
 戻る {
  isLoading: false、
  flags: false, //コントロール使用位置: {
  x: 0,
  y: 0,
  },
  索引: "",
  ny: "",
  dx: "",
  dy: "",
  xPum: "",
  yPum: "",
 };
 },

メソッド: {
 折り返し電話（） {
  $router.go(-1);
 },
 リフレッシュ() {
  // ウィンドウの場所を再読み込みします。
  setTimeout((res) => {
  コンソールログ(res);
  this.isLoading = false;
  }, 1000);
 },
 下（） {
  this.flags = true;
  var タッチ;
  if (イベント.タッチ) {
  タッチ = イベント.タッチ[0];
  } それ以外 {
  タッチ = イベント;
  }
  this.position.x = touch.clientX;
  this.position.y = touch.clientY;
  this.dx = this.$refs.fu.offsetLeft;
  this.dy = this.$refs.fu.offsetTop;
 },
 動く（） {
  if (this.flags) {
  var タッチ;
  if (イベント.タッチ) {
   タッチ = イベント.タッチ[0];
  } それ以外 {
   タッチ = イベント;
  }
  this.nx = touch.clientX - this.position.x;
  this.ny = touch.clientY - this.position.y;
  this.xPum = this.dx + this.nx;
  this.yPum = this.dy + this.ny;
  let width = window.innerWidth - this.$refs.fu.offsetWidth; // 画面の幅からコントロールの幅を引いた値 let height = window.innerHeight - this.$refs.fu.offsetHeight; // 画面の高さからコントロールの高さを引いた値 this.xPum < 0 && (this.xPum = 0);
  this.yPum < 0 && (this.yPum = 0);
  this.xPum > 幅 && (this.xPum = 幅);
  this.yPum > 高さ && (this.yPum = 高さ);
  // if (this.xPum >= 0 && this.yPum >= 0 && this.xPum<= 幅 &&this.yPum<= 高さ) {
  this.$refs.fu.style.left = this.xPum + "px";
  this.$refs.fu.style.top = this.yPum + "px";
  // }
  //デフォルトでページがスライドしないようにする document.addEventListener(
   「タッチムーブ」、
   関数 （） {
   イベントをデフォルトにしない();
   },
   間違い
  );
  }
 },
 //マウスが離されたときの関数 end() {
  this.flags = false;
 },
 クリック() {
  //ここではこれをサブコンポーネントとして使用しています。this.$emit("click");
 },
 },

<スタイルスコープ>
.コールバックp{
 フォントサイズ: 16px;
 色: #fff;
 背景: rgba(56, 57, 58, 0.5);
 境界線の半径: 50%;
 テキスト配置: 中央;
 幅: 50px;
 高さ: 50px;
 行の高さ: 50px;
 フォントファミリー: PingFang SC;
 フォントの太さ: 600;
 ボックスシャドウ: 0 0 10px #fff;
}
.コールバック画像{
 表示: ブロック;
 幅: 50px;
 高さ: 50px;
 ボックスシャドウ: 0 0 10px rgb(133, 129, 129);
 境界線の半径: 50%;
 背景: #fff;
}
。折り返し電話 {
 位置: 固定;
 上: 40px;
 左: 20px;
 zインデックス: 99999;
}
.float {
 位置: 固定;
 右: 20px;
 上位: 60%
 タッチアクション: なし;
 テキスト配置: 中央;
 幅: 50px;
 高さ: 50px;
 境界線の半径: 24px;
 行の高さ: 48px;
 色: 白;
}
</スタイル>