ドラッグ機能は主に、ドラッグによる並べ替え、ポップアップ ボックスのドラッグと移動など、ユーザーがカスタマイズされたアクションを実行できるようにするために使用されます。 ドラッグアンドドロッププロセスアクション1. マウスを押すとonmousedownイベントがトリガーされます 2. マウスの動きがonmousemoveイベントをトリガーする 3. マウスを離すとonmouseupイベントがトリガーされます 抗力原理1. マウスの押下 + マウスの移動 = ドラッグ ------- イベント onmousedown + onmousemove 2. マウスを離す = ドラッグなし -------- マウスを離すとドラッグが停止します 3. マウスオフセット = ドラッグ距離 DOM をクリックすると、現在のマウス座標、つまり x 値と y 値、およびドラッグされた DOM の上と左の値を記録し、マウスが押されたコールバック関数にマウス移動イベントを追加します。 document.addEventListener("mousemove", 移動中, false) マウスアップイベントを追加します document.addEventListener("mouseup",function() { document.removeEventListener("mousemove", 移動中, false); }、 間違い); このリフト イベントは、マウスの動きの監視をキャンセルするために使用されます。ドラッグはマウスが押されているときにのみ実行でき、マウスを離すと動きが停止するためです。 マウスを押して動かすと、動きの x 値と y 値が記録され、ドラッグされた DOM の上と左の値は次のようになります。 // 非常にシンプルなバージョン var div = document.querySelector("div"); // 押されたときにドキュメント内のマウス移動イベントのリッスンを開始します // マウスのリリースイベントのリッスンを開始します // 押されたときにのみドラッグを準備します div.onmousedown=function(e1){ // マウスがドキュメント内を移動しても、div 上では移動できません。マウスが div から離れてしまうと、div をドラッグできなくなります。onmousemove=function(e){ // マウスが動くと、要素の左上とビューポートを基準とした現在のマウス座標が割り当てられます。 // 押された位置でドラッグする必要があるため、キーが押されたときに div を基準としたマウスの左上隅の位置も取得する必要があります。 // マウスが押された位置でドラッグされるようにするには、現在のマウスの位置から相対要素の左上隅の位置を引いた値を使用します。 div.style.left=e.clientX-e1.offsetX+"px"; div.style.top=e.clientY-e1.offsetY+"px"; } // マウスボタンが放されたら、マウス移動イベントを削除し、マウス解放イベントを削除します div.onmouseup=function(){ ドキュメント.onmousemove=null; ドキュメント.onmouseup=null; } } //シンプルバージョン var div = document.querySelector("div"); var オフセットX、オフセットY; div.addEventListener("mousedown",mouseDownHandler); 関数mouseDownHandler(e){ オフセットX=e.オフセットX オフセットY=e.オフセットY document.addEventListener("mousemove",mousemoveHandler) document.addEventListener("mouseup",mouseupHandler) } 関数mousemoveHandler(e){ div.style.left=e.clientX-offsetX+"px" div.style.top=e.clientY-offsetY+"px" } 関数mouseupHandler(e){ document.removeEventListener("mousemove",mousemoveHandler) document.removeEventListener("mouseup",mouseupHandler) } // シンプルなアップグレードバージョン var div = document.querySelector ("div"); var オフセットX、オフセットY; div.addEventListener("mousedown",mouseHandler); 関数mouseHandler(e){ if(e.type==="mousedown"){ オフセットX = e.offsetX; オフセットY=e.offsetY; document.addEventListener("mousemove",mouseHandler) document.addEventListener("mouseup",mouseHandler) }それ以外の場合(e.type==="mousemove"){ div.style.left=e.clientX-offsetX+"px" div.style.top=e.clientY-offsetY+"px" }それ以外の場合(e.type==="mouseup"){ document.removeEventListener("mousemove",mouseHandler) document.removeEventListener("mouseup",mouseHandler) } } 注記 a. ドラッグされた要素のスタイルを有効にするには、絶対位置または相対位置に設定する必要があります。 以上がこの記事の全内容です。皆様の勉強のお役に立てれば幸いです。また、123WORDPRESS.COM を応援していただければ幸いです。 以下もご興味があるかもしれません:
|
>>: Linux で MySQL のスケジュールバックアップを実装する方法
1. MySQL で現在の時刻を表現するにはどうすればよいでしょうか?実際、表現方法はいろいろありま...
目次1. Maven 依存関係2. メニュー関連クラス1. メインメニュー2. サブメニュー3. S...
目次1. grub.cfg ファイルの紹介1. grub.cfg ファイルの場所2. grub.cf...
1. MySQL Community Server 5.6.35をダウンロードするダウンロードアドレ...
データベースの移行は、よく遭遇する問題です。データ量が少ない場合、移行は基本的に問題になりません。実...
この記事では、例を使用して MySQL ビューの機能と使用方法を説明します。ご参考までに、詳細は以下...
前回の記事でMySQLサービスが起動しない問題が解決したと分かった後、パスワードなしでrootユーザ...
ビジネス要件最近開発したプロジェクトの一つに、WeChat公式アカウントに関連したH5ページがありま...
エフェクト表示組み込みのブートインターフェースがあまりにも醜いので、テーマをダウンロードして美しくし...
目次日付オブジェクト日付オブジェクトの作成新しい日付()日付を取得する()取得日()月を取得する()...
最初のもの: 1. 主要なヘッダーファイルを追加します。 #include <linux/of...
目次実験環境インストールと展開データベースをインストールして設定します (ここでは mariadb ...
オープンソース データベース アーキテクチャの設計原則01. 技術の選択最も使い慣れていて、最大限に...
CSSを使用してスクロールバーを変更する1.コンテンツがオーバーフローした場合のオーバーフロー設定水...
目次rocketmqイメージを取得する名前rvを作成する単一のブローカーノードを作成するrocket...