この記事では、ドラッグアンドドロップを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 パスワードを変更する方法 (画像付き)
目次1. 定義と使用1.1 定義1.2 使用2. 複数のファイルに分割する3. エイリアス序文: T...
目次1. 従来のコレクションに対するフィルター、マップ、および削減処理方法2. 再帰処理3. for...
目次1. MySQLインデックスの紹介2. MySQLの5種類のインデックスの詳しい説明1. 総合索...
本文は以下から始まります。 123WORDPRESS.COM ダウンロード:純粋な CSS3 で超リ...
1. 切断理由WebSocket が切断される理由は多数あります。WebSocket が切断されたと...
目次遷移フック関数カスタム遷移クラス名遷移グループの使用まとめまずは例を見てみましょうコードは次のと...
構造関連タグ--------------------------------------------...
# 以下の例は x64 ビット ランタイム v3.0.0 用です mkdir /runtimes ...
コードをコピーコードは次のとおりです。 <HTML> <ヘッド> <T...
目次序文1.v-ショー2.v-if 3. v-showとv-ifの違い1. 原則の違い2. アプリケ...
Linuxは特定のプログラムを見つけますwhereis コマンドは主にプログラム ファイルを検索し、...
WML (ワイヤレス マークアップ言語)。これは HTML から派生したマークアップ言語ですが、W...
目次序文1. ignore を挿入2. 重複キーの更新時3. を置き換える要約する序文Mysql は...
質問Docker が elasticsearch をインストールして起動するときにメモリが不足するシ...
序文コンピュータの数値は浮動小数点であるため、計算プロセス中に取得されるデータは通常正確ではなく、そ...