ドラッグ効果を実現するための 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 パスワードを変更する方法 (画像付き)

推薦する

Linux でのログ サーバーの設定に関するグラフィック チュートリアル

序文この記事では、Linux 構成ログ サーバーに関する関連コンテンツを主に紹介し、参考と学習のため...

Apache FlinkCEP でタイムアウトステータス監視を実装するための詳細な手順

CEP - 複合イベント処理。ご注文後、一定期間内にお支払いの確認が取れませんでした。タクシーの配...

JS は Baidu 検索ボックスを実装します

この記事の例では、Baidu検索ボックスを実装するためのJSの具体的なコードを参考までに共有していま...

React Contextの理解と応用についてお話ししましょう

目次序文React Context の初見コンテキストの使い方コンテキストを直接取得できるいくつかの...

CentOS7にsshをインストールして設定する

1. openssh-serverをインストールする yum インストール -y openssl o...

Dockerでk8sをデプロイする方法

K8s k8s はクラスターです。クラスターには複数の名前空間があります。名前空間の下には複数のポッ...

Linux でジャンプ サーバー経由でリモート サーバーに接続し、ファイルを転送する方法

最近、Linux ホストに環境を展開する際に多くの問題に遭遇しました。最初の問題は、ジャンプ サーバ...

Docker ビルド kubectl イメージ実装手順

プログラムサービスがgitlab ci/cdと統合されたk8sを使用してデプロイされている場合、gi...

dubbo での Zookeeper リクエストのタイムアウト問題: mysql8.0.15 に接続する mybatis+spring の構成

ここ2日間Javaを復習するつもりなので、練習にdubboを使ってショッピングモールプロジェクトを書...

グループフィールドを 1 行に書き込むための mysql group_concat メソッドの例

この記事では、MySQL group_concat を使用してグループ化されたフィールドを 1 つの...

MySQL の乗算と除算の精度の不一致の問題 (除算後の小数点以下 4 桁)

質問今日、プロジェクト関数を書いていたとき、金額の統計計算を行い、単位を変換する必要がありました。そ...

Linux スワップメモリ​​を拡張する方法

スワップ メモリとは、主に物理メモリが不足している場合に、システムがハード ディスク領域の一部をサー...

TypeScriptのインデックスシグネチャの理解に関する簡単な説明

目次1. インデックス署名とは何ですか? 2. インデックス署名構文3. インデックス署名に関する注...

Centos8 で yum を使用して mongodb 4.2 をインストールする方法

1. リポジトリファイルを作成するmongodb の公式インストール ドキュメントを参照し、次のスク...

CSS3 で Taobao に空白スペースを実装する方法

Taobao用の空白スペースを作成します。 ブラウザページを縮小すると、コンテンツ領域は縮小されませ...