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

ドラッグ効果を実現するための 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>

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

以上がこの記事の全内容です。皆様の勉強のお役に立てれば幸いです。また、123WORDPRESS.COM を応援していただければ幸いです。

以下もご興味があるかもしれません:
  • JavaScriptのオブジェクト指向プログラミングを見てみましょう
  • JavaScript オブジェクト指向の実践の詳細説明: カプセル化とオブジェクトのドラッグ
  • JavaScript オブジェクト指向プログラミングの詳細な説明 [クラス作成、インスタンスオブジェクト、コンストラクタ、プロトタイプなど]
  • JavaScript オブジェクト指向のコア知識と概念の要約
  • JavaScriptオブジェクト指向の7つの基本原則の詳細な例
  • JavaScriptのオブジェクト指向をご存知ですか?

<<:  Ubuntu 18仮想マシンのクローン作成後に同じIPアドレスになる問題の解決方法

>>:  Xampp サーバーで MySQL パスワードを変更する方法 (画像付き)

推薦する

TypeScript名前空間の説明

目次1. 定義と使用1.1 定義1.2 使用2. 複数のファイルに分割する3. エイリアス序文: T...

Vue Element フロントエンドアプリケーション開発のための従来の JS 処理機能

目次1. 従来のコレクションに対するフィルター、マップ、および削減処理方法2. 再帰処理3. for...

MySQLデータベースインデックスの詳細な説明

目次1. MySQLインデックスの紹介2. MySQLの5種類のインデックスの詳しい説明1. 総合索...

CSSを使用して炎の効果を作成する方法

本文は以下から始まります。 123WORDPRESS.COM ダウンロード:純粋な CSS3 で超リ...

JS WebSocket 切断理由とハートビートの仕組みの詳しい説明

1. 切断理由WebSocket が切断される理由は多数あります。WebSocket が切断されたと...

Vue のトランジション効果とアニメーショントランジションの使用例の詳細な説明

目次遷移フック関数カスタム遷移クラス名遷移グループの使用まとめまずは例を見てみましょうコードは次のと...

WMLタグの概要

構造関連タグ--------------------------------------------...

Linux に ASPNET.Core3.0 ランタイムをインストールするためのサンプル コード

# 以下の例は x64 ビット ランタイム v3.0.0 用です mkdir /runtimes ...

Web ページでパラメータ名によって ActiveX コントロールのプロパティに値を割り当てる例

コードをコピーコードは次のとおりです。 <HTML> <ヘッド> <T...

Vue でよく使われる命令 v-if と v-show の違いを簡単に分析します。

目次序文1.v-ショー2.v-if 3. v-showとv-ifの違い1. 原則の違い2. アプリケ...

Linux で特定のプログラムを見つけるための whereis の例の詳細な説明

Linuxは特定のプログラムを見つけますwhereis コマンドは主にプログラム ファイルを検索し、...

WMLとは何ですか?

WML (ワイヤレス マークアップ言語)。これは HTML から派生したマークアップ言語ですが、W...

MySql バッチに挿入するときにデータの重複を避ける方法

目次序文1. ignore を挿入2. 重複キーの更新時3. を置き換える要約する序文Mysql は...

Docker が elasticsearch を起動するときのメモリ不足の問題と解決策

質問Docker が elasticsearch をインストールして起動するときにメモリが不足するシ...

js 加算、減算、乗算、除算の正確な計算方法のサンプルコード

序文コンピュータの数値は浮動小数点であるため、計算プロセス中に取得されるデータは通常正確ではなく、そ...