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 サブドメイン設定の詳細なチュートリアル

推薦する

Vue3 トランジションアニメーションの落とし穴記録について

目次背景問題の場所さらなる分析要約する背景私のコース「Vue 3 エンタープライズレベルの音楽アプリ...

Docker の詳細なイラスト

1. Dockerの紹介1.1 仮想化1.1.1 仮想化とは何ですか?コンピュータにおける仮想化とは...

フォームを送信した後、別のファイルに移動する

<br />質問:特定のファイルにジャンプするには、HTML でどのように記述すればよい...

【HTML要素】画像の埋め込み方法

img 要素を使用すると、HTML ドキュメントに画像を埋め込むことができます。画像を埋め込むには、...

ウェブページの背景色を制御する CSS コード

誰もが自分の Web ページの背景にふさわしい画像を見つけることに悩むことが多いと思います。これは事...

nginxプロキシsocket.ioサービスの落とし穴の詳細な説明

目次Nginx は 2 つの socket.io サーバーをプロキシします。 socket.ioの動...

要素のフォーム要素の使用の概要

フォーム要素はたくさんあります。簡単にまとめると、次のようになります。私のやり方では、主にテキスト ...

Nginxポーリングアルゴリズムの基本的な実装方法の詳細な説明

ポーリングアルゴリズムの紹介多くの人が職場で nginx を使用しており、その設定に精通しています。...

MySQL デッドロックのトラブルシューティング プロセスの完全な記録

序文これまで遭遇したデータベースのデッドロックはすべて、バッチ更新中のロック順序の不一致が原因でした...

Mysql 8.0.18 ハッシュ結合テスト (推奨)

ハッシュ結合ハッシュ結合は実行にインデックスを必要とせず、ほとんどの場合、現在のブロックネストループ...

JS で美しい条件式を書く方法についての簡単な説明

目次複数の条件文複数属性オブジェクトスイッチステートメントを置き換えるデフォルトパラメータとデストラ...

上部の固定ナビゲーションバーによって CSS アンカーの配置がブロックされる問題の解決方法

多くのウェブサイトでは、ユーザーが簡単に検索したり他のページに移動したりできるように、上部にナビゲー...

CSS の ::before と ::after 疑似要素について知らないこと

CSS には、一般的には使用されない 2 つの疑似クラス、before と :after があります...

MySQLでトリガーを作成する方法

この記事の例では、参考のためにMySQLトリガーを作成するための具体的なコードを共有しています。具体...