この記事では、ドラッグアンドドロップを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 を応援していただければ幸いです。 以下もご興味があるかもしれません:
|
<<: Ubuntu 18仮想マシンのクローン作成後に同じIPアドレスになる問題の解決方法
>>: Xampp サーバーで MySQL パスワードを変更する方法 (画像付き)
序文この記事では、Linux 構成ログ サーバーに関する関連コンテンツを主に紹介し、参考と学習のため...
CEP - 複合イベント処理。ご注文後、一定期間内にお支払いの確認が取れませんでした。タクシーの配...
この記事の例では、Baidu検索ボックスを実装するためのJSの具体的なコードを参考までに共有していま...
目次序文React Context の初見コンテキストの使い方コンテキストを直接取得できるいくつかの...
1. openssh-serverをインストールする yum インストール -y openssl o...
K8s k8s はクラスターです。クラスターには複数の名前空間があります。名前空間の下には複数のポッ...
最近、Linux ホストに環境を展開する際に多くの問題に遭遇しました。最初の問題は、ジャンプ サーバ...
プログラムサービスがgitlab ci/cdと統合されたk8sを使用してデプロイされている場合、gi...
ここ2日間Javaを復習するつもりなので、練習にdubboを使ってショッピングモールプロジェクトを書...
この記事では、MySQL group_concat を使用してグループ化されたフィールドを 1 つの...
質問今日、プロジェクト関数を書いていたとき、金額の統計計算を行い、単位を変換する必要がありました。そ...
スワップ メモリとは、主に物理メモリが不足している場合に、システムがハード ディスク領域の一部をサー...
目次1. インデックス署名とは何ですか? 2. インデックス署名構文3. インデックス署名に関する注...
1. リポジトリファイルを作成するmongodb の公式インストール ドキュメントを参照し、次のスク...
Taobao用の空白スペースを作成します。 ブラウザページを縮小すると、コンテンツ領域は縮小されませ...