この記事では、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 を応援していただければ幸いです。 以下もご興味があるかもしれません:
|
<<: ウェブサイトレイアウトにおける CSS の計算関数 calc の例
>>: Docker nginx + https サブドメイン設定の詳細なチュートリアル
Canvas は HTML5 の新しいタグです。js を使用して Canvas 描画 API を操作...
目次1. はじめに2. 詳しい説明2.1、非同期2.1.1. 関数はPromise以外のオブジェクト...
目次1. ルーティング関連オブジェクト2. ルーティングオブジェクトの場所3. ルーティング構成4....
⑴ 内容によって形式が決まります。まず内容を充実させ、次にブロックに分割し、トーンを決め、最後に細部...
この記事では、JavaScript Canvasの動的なワイヤーフレーム効果を描画する具体的なコード...
ページ ヘッダーの固定レイアウトは、以前は position:fixed を使用して実装されていまし...
目次1. コンストラクタとインスタンス化2. コンストラクターとインスタンス化の関係は何ですか? 3...
MySQL DECIMALデータ型は、データベースに正確な数値を保存するために使用されます。会計シス...
目次ネスティング親子コンポーネント通信ブラザーコンポーネント通信撤回するReact の Linked...
デフォルトでは、CentOS 7 上の PHP は apache または nobody として実行さ...
目次1. まずRefとは何かを説明しましょう2. フックでのrefの使用1. HTMLDomフックで...
質問:最近、プロジェクトを展開すると文字化けしたデータが出てきました。確認したところ、プロジェクトは...
目次レイアウトを作成するCSSスタイルを追加するJavaScript で要素を操作する対象要素を取得...
cmdにnet start mysqlと入力すると、プロンプトが表示されます: サービス名が無効です...
まず、コンテナが稼働している必要がありますコンテナのCONTAINER IDは、sudo docke...