この記事では、マウスドラッグ効果を実現するための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 をクリーンにアンインストールする方法 (テスト済みで効果的)
公式サイトの説明: コンポーネントを定義する場合、コンポーネントは複数のインスタンスを作成するために...
HTML と CSS で、ボタンの色を設定したいとします。 目的の効果は得られますが、プロセスはかな...
日常業務では、ログを表示する必要がよくあります。たとえば、 tail コマンドを使用してログをリアル...
多くの人が MySQL の起動時にこのエラーに遭遇しています。まず、このエラーの前提は、サービス ス...
目次1. Docker Compose とは何ですか? 2. Docker Composeのインスト...
目次1. ショッピングカートの例2. コードの実装3. まとめ1. ショッピングカートの例一連の学習...
元のコード: center.html : <!DOCTYPE html> <htm...
目次予備作業バックエンド構築フロントエンドページダイレクトレンダリングsetTimeout ページン...
1: readonly は、このコントロールをロックして、インターフェイス上で変更できないようにしま...
序文add_header は、headers モジュールで定義されたディレクティブです。名前が示すよ...
** CentOS7 で yum ソースをインストールし、rz および sz コマンドをアップロー...
仕事上、携帯電話に適応した Web ページ効果を作成する必要があります。ようやく完成しました。まずは...
テーブル ヘッダーが固定されている場合は、それを 2 つのテーブルに分割する必要があります。1 つの...
国内の多くの広告主にとって、印刷広告の制作と評価は、しばしばかなり主観的です。自分の感情や美的感覚に...
複数列のインデックスについては、理解が不足していることがよくあります。よくある間違いは、多数の列に独...