vue+tsは要素のマウスドラッグの効果を実現します

// clientX はブラウザの左上隅を基準としたマウスの x 軸座標です。スクロール バーによって変化しません。
// clientY ブラウザの左上隅を基準としたマウスの y 軸上の座標。スクロール バーによって変化しません。
// element.offsetTop は、要素と上部または上部コントロール間の距離 (整数、単位ピクセル) を示します。
// element.offsetLeft は、左または上のコントロールからの要素の位置 (整数、単位ピクセル) を参照します。
// element.offsetWidth は要素コントロール自体の幅 (整数、単位ピクセル) を参照します。
// element.offsetHeight は要素コントロール自体の高さ (整数、単位ピクセル) を参照します。
// clientHeigh = 高さ + 上部と下部のパディング
// clientWidth = 幅 + 左右のパディング

<テンプレート>
  <div class="to-do-list" ref="parentBox">
    <div class="検索タイトル">
      <h1 class="add-bold left-box" style="margin-left:35px">
        <a-icon type="unordered-list" style="margin-right: 10px;" />要素のドラッグ</h1>
    </div>
    <a-button ref="moveBtn" style="width: 100px;height: 40px;transition:none" class="move-btn" type="primary"
      >ドラッグボタン</a-button
    >
  </div>
</テンプレート>

<script lang="ts">
'vue-property-decorator' から { Component、Emit、Inject、Prop、Ref、Vue、Watch } をインポートします。

@成分（{
  コンポーネント: {},
})
エクスポートデフォルトクラス BriberyInformation は Vue を拡張します {
  @Ref() 読み取り専用で移動Btn;
  @Ref() 読み取り専用の親ボックス。

  btnDown() {
    let box = this.moveBtn.$el; //ボタンのボックスのDOM要素を取得します。let parentBox = this.parentBox; //ボタンの親DOM要素を取得します。let parentH = parentBox.clientHeight; //ボタンの親要素の高さを取得します。
    let parentW = parentBox.clientWidth; //ボタンの親要素の幅を取得する

    x, y とします。
    let moveX, moveY; //移動距離let maxX, maxY; //最大移動距離let isDrop = false;

    ボックス.onmousedown = e => {
      x = e.clientX - box.offsetLeft; // e.clientX はブラウザの左上隅の x 軸に対するマウス座標 - ボタン上部のコントロールの位置 y = e.clientY - box.offsetTop;
      isDrop = true;
    };
    ドキュメント.onmousemove = e => {
      if (isDrop) {
        e.preventDefault();
        moveX = e.clientX - x; // 左側からの移動距離を取得します。 moveY = e.clientY - y; // 上からの移動距離を取得します。 // 最大移動距離 maxX = parentW - box.offsetWidth;
        maxY = 親H - ボックスのオフセット高さ;

        // 有効移動距離の計算 //console.log(Math.min(-1, 4, 6, 12)); // 出力 -1----- 複数のパラメーター、最小値を返す moveX = Math.min(maxX, Math.max(0, moveX));

        移動Y = Math.min(maxY, Math.max(0, 移動Y));
        box.style.left = moveX + 'px';
        box.style.top = moveY + 'px';
      } それ以外 {
        戻る;
      }
    };
    ドキュメント.onmouseup = e => {
      e.preventDefault();
      isDrop = false;
    };
  }

  マウント() {
    this.btnDown();
  }
}
</スクリプト>
<style スコープ lang="less">
.to-doリスト{
  位置: 相対的;
  最小高さ: 600px;
  最大高さ: 600px;
  幅: 600ピクセル;
  オーバーフロー: 非表示;
  境界線: 2px 黒一色;
  .move-btn {
    位置: 絶対;
  }
}
</スタイル>