Vueでドラッグ可能なコンポーネントを実装する方法

<テンプレート>
  <div
    ref="ラッパー"
    クラス="ドラッグバーラッパー"
  >
    <div
      ref="ヘッダー"
      クラス="ドラッグバーヘッダー"
    >
      <!-- ヘッダー領域 -->
      <スロット名="ヘッダー" />
    </div>
    <div class="ドラッグバーコンテンツ">
      <!-- メインコンテンツエリア -->
      <スロット名="デフォルト" />
    </div>
    <div class="ドラッグバーフッター">
      <!-- 下部領域 -->
      <スロット名="フッター" />
    </div>
  </div>
</テンプレート>
 
<スクリプト>
エクスポートデフォルト{
  データ（） {
    戻る {
      wrapperDom: null、
      ヘッダーDom: null、
 
      ディスX: 0,
      ディスY: 0,
 
      最小左: 0,
      最大左: 0,
 
      最小トップ: 0,
      最大上: 0,
 
      前へ左: 0,
      前へトップ: 0,
    };
  },
  メソッド: {
    初期化ドラッグ() {
      this.wrapperDom = this.$refs.wrapper;
      this.headerDom = this.$refs.header;
      this.headerDom.addEventListener('mousedown', this.onMousedown, false);//ヘッダー領域をクリックしてドラッグします},
    マウスダウン時(e) {
      this.disX = e.clientX - this.headerDom.offsetLeft;
      this.disY = e.clientY - this.headerDom.offsetTop;
 
      this.minLeft = this.wrapperDom.offsetLeft;
      this.minTop = this.wrapperDom.offsetTop;
 
      this.maxLeft =
        window.innerWidth - this.minLeft - this.wrapperDom.offsetWidth;
      this.maxTop =
        window.innerHeight - this.minTop - this.wrapperDom.offsetHeight;
 
      const { left, top } = getComputedStyle(this.wrapperDom, false);
      this.prevLeft = parseFloat(left);
      this.prevTop = parseFloat(top);
 
      document.addEventListener('mousemove', this.onMousemove, false);
      document.addEventListener('mouseup', this.onMouseup, false);
      document.body.style.userSelect = 'none'; //ドラッグ中に選択したテキストの干渉を排除します},
    マウスを動かすと(e) {
      left = e.clientX - this.disX とします。
      top = e.clientY - this.disY とします。
 
      if (-left > this.minLeft) {
        左 = -this.minLeft;
      } そうでない場合 (left > this.maxLeft) {
        左 = this.maxLeft;
      }
 
      if (-top > this.minTop) {
        上 = -this.minTop;
      } そうでない場合 (top > this.maxTop) {
        上 = this.maxTop;
      }
 
      this.wrapperDom.style.left = this.prevLeft + left + 'px';
      this.wrapperDom.style.top = this.prevTop + top + 'px';
    },
    マウスアップ時() {
      document.removeEventListener('mousemove', this.onMousemove, false);
      document.removeEventListener('mouseup', this.onMouseup, false);
      document.body.style.userSelect = 'auto'; //テキストを選択可能に戻す},
  },
  マウント() {
    this.initDrag();
  }
};
</スクリプト>
 
<スタイルスコープ>
.ドラッグバーラッパー{
  位置: 固定;
  zインデックス: 2;
  上位: 50%;
  左: 50%;
  変換: translate(-50%, -50%);
  ディスプレイ: フレックス;
  flex-direction: 列;
}
.ドラッグバーヘッダー{
  背景色: #eee;
  カーソル: 移動; /*マウスドラッグスタイル*/
}
.ドラッグバーコンテンツ{
  背景色: #fff;
}
.ドラッグバーフッター{
  背景色: #fff;
}
</スタイル>