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 を応援していただければ幸いです。

以下もご興味があるかもしれません: