ドラッグ効果を実現するための js オブジェクト指向メソッド

この記事では、ドラッグアンドドロップをJSオブジェクト指向で実装するための具体的なコードを参考までに共有します。具体的な内容は次のとおりです。

ドラッグ機能の実装原理: (直接取り除きます!)

<!DOCTYPE html>
<html lang="ja">

<ヘッド>
  <メタ文字セット="UTF-8">
  <meta name="viewport" content="width=デバイス幅、初期スケール=1.0">
  <meta http-equiv="X-UA-compatible" content="ie=edge">
  <title>ドキュメント</title>
  <スタイル>
    ＃箱 {
      位置: 絶対;
      左: 100px;
      上: 100px;
      幅: 100ピクセル;
      高さ: 100px;
      背景: 赤;
    }

    #ボックス2 {
      位置: 絶対;
      左: 200px;
      上: 200px;
      幅: 100ピクセル;
      高さ: 100px;
      背景: 緑;
    }
  </スタイル>
</head>

<本文>
  <div id="box">テキスト</div>
  <div id="box2">テキスト</div>
</本文>
<スクリプト>
  クラスドラッグ{
    マウスを起動します。
    開始El = {};
    #el = null;
    コンストラクタ(el, オプション) {
      this.#el = el;
      this.option = オプション;
      これを開始();
    }
    始める（） {
      移動 = (e) => {
        this.move(e)
      }
      this.#el.addEventListener('mousedown', (e) => {
        this.startMouse = {
          x: e.clientX、
          y: e.clientY,
        }
        this.ondragstart && this.ondragstart(e)
        this.startEl = this.getOffset();
        document.addEventListener('mousemove', 移動);
        document.addEventListener('mouseup', (e) => {
          document.removeEventListener('mousemove', 移動);
          this.end(e);
        }, {
          一度: 真
        })
        e.preventDefault();

      })
    }
    移動する{
      nowMouse = {
        x: e.clientX、
        y: e.clientY,
      }
      disMouse = {
        x: nowMouse.x - this.startMouse.x、
        y: nowMouse.y - this.startMouse.y
      }
      this.ondrag && this.ondrag(e)
      this.setOffset(マウスを離す)
    }
    終了(e) {
      this.ondragend && this.ondragend(e)
    }
    オフセット取得() {
      戻る {
        x: parseFloat(getComputedStyle(this.#el)["left"]),
        y: parseFloat(getComputedStyle(this.#el)["top"])
      }
    }
    setOffset(dis) {
      this.#el.style.left = this.startEl.x + dis.x + 'px'
      this.#el.style.top = this.startEl.y + dis.y + 'px'
    }
  }
  box = document.querySelector("#box"); とします。
  box2 を document.querySelector("#box2") とします。
  d = new Drag(box); とします。
  d2 = new Drag(box2); とします。
  clonex = null とします。
  d2.ondragstart = (e) => {
    clonex = box2.cloneNode(true);
    document.body.appendChild(クローン)
    box2.style.不透明度 = 0.5
  }
  d2.ondragend = () => {
    document.body.removeChild(clonex);
    box2.style.不透明度 = 1
  }
</スクリプト>

</html>

最終的な効果（ドラッグされたブロックは緑のブロックです）