今回の
レンダリングの具体的な内容は次のとおりです。
この実験の難しさは、ボックスとマウスの相対位置を変更しないことだと思います。マウスを押して動かすことでドラッグ効果を実現するにはどうすればよいでしょうか
。
onmousedown 、 onmousemove 、およびonmouseupの 3 つの関数を使用する必要があります。これらはそれぞれマウスの押下、マウスの移動、およびマウスの持ち上げを表します。
マウス押下のコールバック関数では、 clientXおよびclientYを通じてマウスの初期位置を取得する必要があります。 offsetLeftとoffsetTopを通じてボックスの初期位置を取得し、マウスの移動のコールバック関数でマウスの初期位置とボックスの初期位置の差を計算し
、現在の位置を取得する必要があります。マウスの位置と以前に計算された位置との差に基づいてボックスを作成し、その左と上の値を変更します。位置を絶対値に設定することを忘れないでください（単に忘れてしまったため...）
。マウス リフトでは、 onmousemoveとonmouseup値を null に設定して、マウスの動きとマウス リフトをクリアする必要があります。また、
注意してください。 ！ ！
マウス移動関数とマウスリフト関数の両方をマウスプレス関数内に記述する必要があります。これは、マウスプレスアクションの後の動作を設計する必要があるためです。非常に重要な点は、
マウスプレス関数は p であり、マウスは
マウスが p 内で移動するという意味ではなく、ページ全体を移動するという意味なので、
移動
とマウスの上昇は
おそらく次のコードです。
<html>
<頭>
<meta charset="UTF-8">
<meta http-equiv="X-UA 互換" content="IE=edge">
<meta name="viewport" content="width=device-width、initial-scale=1.0">
<title>ドキュメント</title>
<スタイル>
＃箱{
幅: 100ピクセル;
高さ: 100ピクセル;
背景色: アクアマリン;
境界半径: 14px;
ボックスシャドウ: 2px 2px 6px rgba(0,0,0,.3);
/* 上手い人は、位置を設定せずに左を移動して変更したいと考えています。 。 。 */
位置: 絶対;
}
</スタイル>
</head>
<本文>
<div id="box"></div>
<スクリプト>
let box=document.getElementById("box");
box.onmousedown=関数(イベント){
let disx=event.clientX-box.offsetLeft;
disy=event.clientY-box.offsetTop; にします。
//これはbox.onmousemoveではなく、document.onmousemoveです
document.onmousemove=関数(イベント){
box.style.left=event.clientX-disx+'px';
box.style.top=event.clientY-disy+'px';
}
//omniusedownに記述する document.onmouseup=function(){
//これらは両方とも null に設定する必要があります
document.onmousemove=null;
document.onmouseup=null;
false を返します。
}
}
</script>
</body>
</html>関連する推奨事項: [JavaScript ビデオ チュートリアル]
上記は、マウス ドラッグ イベントをシミュレートするための js の詳細な内容です (画像とテキストの例付き) 詳細については、PHP 中国語 Web サイトの他の関連記事に注目してください。 ！
