JavaScript は div マウス ドラッグ効果を実装します

JavaScript は div マウス ドラッグ効果を実装します

この記事では、divマウスドラッグ効果を実現するためのJavaScriptの具体的なコードを参考までに紹介します。具体的な内容は次のとおりです。

実装の原則: マウスが押されると、onmousemove イベントに従ってマウスの座標位置が動的に取得され、div の位置が更新されます。実装の前提は、div に位置決め効果がある必要があるということです。そうでない場合は、div を移動できません。

html

<div class="box"></div>

CSS スタイル

。箱 {
    位置: 絶対;
    幅: 200ピクセル;
    高さ: 200px;
    背景: 赤;    
    }

まず、要件を分析しましょう。この要件は、クリック時にマウスが押されたときのみ、ページ上の div の位置を移動および変更できることです。マウスを放すと、それ以上動かすことができなくなります。つまり、マウスには3つの状態があります。つまり、マウスが押されたとき(mousedownイベント)、動かされたとき(mousemoveイベント)、そして放されたとき(mouseupイベント)です。

したがって、js 部分には 3 つのイベントがあります。

JS部分

var box = document.getElementsByClassName("box")[0]; //要素を取得 var x, y; //divの座標を保存 var isDrop = false; //移動状態を判定 マウスを押すと移動します

マウスが押されたとき

box.onmousedown = 関数(e) {
                var e = e || window.event; //イベント オブジェクトを使用してマウスの位置を取得します x = e.clientX - box.offsetLeft;
                y = e.clientY - box.offsetTop;
                isDrop = true; //移動可能であることを示すために true に設定します}

e.clientX は x 軸上のマウスの位置、e.clientY は y 軸上のマウスの位置、box.offsetLeft は div と左側の間の距離を取得し、box.offsetTop は div と上側の間の距離を取得します。

下の図に示すように、e.clientX - box.offsetLeft を使用すると、座標点 x と box.offsetLeft 間の偏差値を取得できます。div が左に対して移動した実際の距離を取得するには、この偏差値を座標点 x から減算する必要があります。同様に、e.clientY - box.offsetTop は上からの距離オフセットを取得します。

マウスが動くと

マウスの動きが速すぎてイベントが正しく処理されないように、イベントはドキュメントにバインドされます。

document.onmousemove = 関数(e) {
         //移動可能な状態かどうか if(isDrop) {
                    var e = e || window.event;
              
                     var moveX = e.clientX - x; // 左までの距離を取得します var moveY = e.clientY - y; // 上までの距離を取得します box.style.left = moveX + "px";
                      box.style.top = moveY + "px";
          }それ以外{
                       戻る ;
          }

            }

e.clientX - マウス ポイントの x 座標から偏差を引いた値が div から左までの距離になり、e.clientY - マウス ポイントの y 座標から偏差を引いた値が div から上までの距離になります。 divの左と上を再割り当てする

マウスを離すと

マウスの動きが速すぎて正しく処理されないのを防ぐために、イベントはドキュメントにバインドされます。

document.onmouseup = 関数() {
                isDrop = false; // 移動を防止するには false に設定します}

これで div をドラッグできるようになりましたが、範囲制限を追加する必要があります。そうしないと、div がページ外にドラッグされてしまい、それが許容されないため、範囲制限を追加する必要があります。 div の最大モバイル幅はページ幅から div 幅を引いた値で、最小値は 0 です。最大高さはページ高さから div 高さを引いた値で、最小値は 0 です。スコープは次のように記述する必要があります

document.onmousemove = 関数(e) {
      var e = e || window.event;
                もし(である) {
                    var moveX = e.clientX - x;
                    var Y を移動します。e.clientY - y;
                    var maxX = document.documentElement.clientWidth - box.offsetWidth; // X軸が移動できる最大距離 var maxY = document.documentElement.clientHeight - box.offsetHeight; // Y軸が移動できる最大距離 // 範囲制限 最小値が取られると最大値が取られます。 最大値が取られると最小値が取られます if (moveX < 0) {
                        移動X=0
                     }そうでない場合(moveX>maxX){
                        移動X=最大X;
                    }
                    
                    移動Y < 0 の場合
                        移動Y=0;
                    }そうでない場合(移動Y>最大Y){
                        移動Y=最大Y; 
                    }

                    box.style.left = moveX + "px";
                    box.style.top = moveY + "px";

                } それ以外 {
                    戻る;
                }

            }

この効果は完璧に達成されますが、範囲が限られている場合はこの方法でも実現できます。

スコープは次のように表現できる。

//範囲制限 最小値から最大値 最大値 最大値から最小値 if (moveX < 0) {
           moveX = Math.max(0,moveX) // 0
     }そうでない場合(moveX>maxX){
           moveX=Math.min(moveX,maxX);//maxX
     }
                    
      移動Y < 0 の場合
          移動Y = Math.max(0,移動Y) //0
      }そうでない場合(移動Y>最大Y){
           moveY=Math.min(moveY,maxY); //maxY
      }

だからこう書くことができる

移動X = Math.min(maxX、Math.max(0、移動X));
移動Y = Math.min(maxY、 Math.max(0、移動Y));

完全なコードは

<!DOCTYPE html>
<html>

    <ヘッド>
        <メタ文字セット="UTF-8">
        <タイトル></タイトル>
        <スタイル>
            。箱 {
                位置: 絶対;
                幅: 200ピクセル;
                高さ: 200px;
                背景: 赤;
            }
        </スタイル>
    </head>

    <本文>
        <div class="box"></div>
        <スクリプト>
            var box = document.getElementsByClassName("box")[0]; //要素を取得します var x, y; //マウスはdivの左上と上からオフセットされます var isDrop = false; //移動状態を判断します 移動するにはマウスを押す必要があります box.onmousedown = function(e) {
                var e = e || window.event; //イベント オブジェクトを使用してマウスの位置を取得します x = e.clientX - box.offsetLeft;
                y = e.clientY - box.offsetTop;
                isDrop = true; //移動可能であることを示すために true に設定します}

            document.onmousemove = 関数(e) {
                //移動可能な状態かどうか if(isDrop) { 
                       var e = e || window.event; 
                      var moveX = e.clientX - x; // 左からの移動距離を取得します var moveY = e.clientY - y; // 上からの移動距離を取得します // 最大移動距離 var maxX = document.documentElement.clientWidth - box.offsetWidth;
                    var maxY = document.documentElement.clientHeight - box.offsetHeight;

                    //範囲制限: 移動距離が最小の場合は最大値を取り、移動距離が最大の場合は最小値を取る //範囲制限方法1 /* if (moveX < 0) {
                        移動X = 0
                    } そうでない場合(moveX > maxX) {
                        移動X = 最大X;
                    }

                    移動Y < 0 の場合
                        移動Y = 0;
                    } そうでない場合(移動Y > 最大Y) {
                        移動Y = 最大Y;
                    } */
                    //範囲制限方法2 moveX=Math.min(maxX, Math.max(0,moveX));
                    
                    移動Y = Math.min(maxY、 Math.max(0、移動Y));
                    box.style.left = moveX + "px"; 
                     box.style.top = moveY + "px"; 
                         } それ以外 {
                    戻る; 
                         }

            }

            document.onmouseup = 関数() {
                isDrop = false; // 移動を防止するには false に設定します}
        </スクリプト>
    </本文>

</html>

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

以下もご興味があるかもしれません:
  • JavaScript を使用してマウス ドラッグ イベントを実装する
  • マウスをドラッグしてサブウィンドウを移動するJS実装
  • jsはマウスをドラッグして画像を切り替えるメソッドを実装します
  • マウスドラッグ複数選択機能を実現する js の例
  • JS マウスドラッグ例の分析
  • jsMindはマウスをドラッグしてノードの位置を調整します
  • js はマウスドラッグ div を左右にスライドすることを実現します
  • JavaScript マウスドラッグイベントの詳細な説明
  • 超クールなマウスドラッグページめくり(ページング)効果でJavaScriptコードを実現
  • マウスのドラッグとズームを実現する js div サンプルコード

<<:  ウェブサイトレイアウトにおける CSS の計算関数 calc の例

>>:  Docker nginx + https サブドメイン設定の詳細なチュートリアル

推薦する

JSはキャンバス技術を使用してeChartsの棒グラフを模倣します

Canvas は HTML5 の新しいタグです。js を使用して Canvas 描画 API を操作...

JavaScript の async と await のシンプルで詳細な学習

目次1. はじめに2. 詳しい説明2.1、非同期2.1.1. 関数はPromise以外のオブジェクト...

Angularルーティングの基礎の詳細な説明

目次1. ルーティング関連オブジェクト2. ルーティングオブジェクトの場所3. ルーティング構成4....

ウェブデザインでは、まずウェブサイトの包括的なイメージの位置付けが必要です。

⑴ 内容によって形式が決まります。まず内容を充実させ、次にブロックに分割し、トーンを決め、最後に細部...

JavaScript Canvas は動的なワイヤーフレーム効果を描画します

この記事では、JavaScript Canvasの動的なワイヤーフレーム効果を描画する具体的なコード...

Flexレイアウトを使用してヘッドの固定コンテンツ領域のスクロールを実現する方法

ページ ヘッダーの固定レイアウトは、以前は position:fixed を使用して実装されていまし...

JSコンストラクタとインスタンス化およびプロトタイプ導入の関係

目次1. コンストラクタとインスタンス化2. コンストラクターとインスタンス化の関係は何ですか? 3...

MySQL データ型 DECIMAL の使用方法の詳細な説明

MySQL DECIMALデータ型は、データベースに正確な数値を保存するために使用されます。会計シス...

Reactのコンポーネント共同利用実装

目次ネスティング親子コンポーネント通信ブラザーコンポーネント通信撤回するReact の Linked...

CentOS 7.2 に SuPHP をインストールするための詳細な手順

デフォルトでは、CentOS 7 上の PHP は apache または nobody として実行さ...

ReactにおけるRefの相互利用の詳細な説明

目次1. まずRefとは何かを説明しましょう2. フックでのrefの使用1. HTMLDomフックで...

Tomcat 実行時の JVM エンコーディングの問題を修正

質問:最近、プロジェクトを展開すると文字化けしたデータが出てきました。確認したところ、プロジェクトは...

JavaScriptでページスクロールアニメーションを実装する

目次レイアウトを作成するCSSスタイルを追加するJavaScript で要素を操作する対象要素を取得...

mysql8.0 パスワードを忘れた場合の修正とネットコマンドのサービス名が無効になる問題

cmdにnet start mysqlと入力すると、プロンプトが表示されます: サービス名が無効です...

Dockerコンテナでルート権限を取得する方法

まず、コンテナが稼働している必要がありますコンテナのCONTAINER IDは、sudo docke...