この記事では、マウスドラッグ効果を実現するためのJavaScriptの具体的なコードを参考までに紹介します。具体的な内容は次のとおりです。 今回のエフェクト画像は以下の通り。 この実験の難しさは、ボックスとマウスの相対的な位置を変えずに、マウスを押したり動かしたりすることでドラッグ効果を実現することだと思います。 ドラッグ効果を実現するにはどうすればいいですか? マウスが押された状態、マウスが移動された状態、マウスが上げられた状態をそれぞれ表す、 マウス押下のコールバック関数では、 マウス移動コールバック関数では、マウスの位置と以前に計算された差に基づいてボックスの現在の位置を取得し、左と上の値を変更する必要があります。位置を絶対に設定することを忘れないでください (忘れていたので...) マウスアップのコールバック関数では、 こちらも注目! ! ! マウス移動機能とマウスリフト機能は、マウス押下機能内に記述する必要があります。これは、マウスが押された後の後続の動作を設計する必要があるためです。次の点が非常に重要です。 マウスダウン機能はdivにあり、マウス移動とマウスアップ機能はドキュメントにあります。 div内でマウスを動かすのではなく、ページ全体を動かしたいからです 重要なポイントはおそらく次のとおりです。コードは次のとおりです。 <!DOCTYPE html> <html lang="ja"> <ヘッド> <メタ文字セット="UTF-8"> <meta http-equiv="X-UA-compatible" content="IE=edge"> <meta name="viewport" content="width=デバイス幅、初期スケール=1.0"> <title>ドキュメント</title> <スタイル> #箱{ 幅: 100ピクセル; 高さ: 100px; 背景色: アクアマリン; 境界線の半径: 14px; ボックスの影: 2px 2px 6px rgba(0,0,0,.3); /* 皆さん、位置を設定せずに左に移動して変更したいとします。 。 。 */ 位置: 絶対; } </スタイル> </head> <本文> <div id="box"></div> <スクリプト> box = document.getElementById("box"); とします。 box.onmousedown=関数(イベント){ 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'; } //ommousedownに書き込む document.onmouseup=function(){ //両方をnullに設定する ドキュメント.onmousemove=null; ドキュメント.onmouseup=null; false を返します。 } } </スクリプト> </本文> </html> 以上がこの記事の全内容です。皆様の勉強のお役に立てれば幸いです。また、123WORDPRESS.COM を応援していただければ幸いです。 以下もご興味があるかもしれません:
|
<<: MySQL をクリーンにアンインストールする方法 (テスト済みで効果的)
毎日サービスをチェックしているときに、portainer からコンテナ ログを確認しようとしたところ...
関連する知識ポイント親コンポーネントから子コンポーネントに値を渡す子コンポーネントから親コンポーネン...
目次MySQL で現在の時刻を表現するにはどうすればよいでしょうか?結論は確認するピットMySQL ...
必要:通常、サイト側は、ウェブサイト上の動画や写真が盗まれるのを防ぎたいと考えています。結局のところ...
導入MySQL スロー クエリ ログは、問題のある SQL ステートメントのトラブルシューティングや...
目次01 JavaScript(略称:js) js は 3 つの部分に分かれています。 JavaSc...
今日は、JavaScript を使用して Web ページ上にプレーヤーを作成する方法を紹介します。誰...
MySQL テーブルのテーブル構造をすばやく変更する - 「MySQL 管理」から抜粋 ALTER ...
プロセスは CPU とメモリ内で実行されるプログラム コードであり、各プロセスは 1 つ以上のプロセ...
目次序文現地調査ケースの再現要約する序文最近、友人が突然WeChatで連絡してきて、MySQLでデー...
1.位置:固定一部の Web サイトの右下隅にあるポップアップ ウィンドウなどの、ブラウザーを基準と...
1. ソフトウェアをダウンロードする1. MySQL の公式サイトにアクセスし、Oracle アカウ...
この記事の例では、ミニプログラムでリストカウントダウンを実装するための具体的なコードを参考までに共有...
目次1.ライフサイクルとは何か2. Vueのライフサイクル3. ライフサイクルフック関数1.ライフサ...
ページの主要部分: <body> <ul id="メニュー"&...