jsドラッグ効果の原理と実装

jsドラッグ効果の原理と実装

ドラッグ機能は主に、ドラッグによる並べ替え、ポップアップ ボックスのドラッグと移動など、ユーザーがカスタマイズされたアクションを実行できるようにするために使用されます。

ドラッグアンドドロッププロセスアクション

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 の上と左の値は次のようになります。
top = マウスが押されたときに記録された DOM の上の値 + (移動中の y 値 - マウスが押されたときの y 値)
left = マウスが押されたときに記録された DOM の左の値 + (移動中の x 値 - マウスが押されたときの x 値);

// 非常にシンプルなバージョン 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. ドラッグされた要素のスタイルを有効にするには、絶対位置または相対位置に設定する必要があります。
b. ドキュメントにドラッグアンドドロップします。そうしないとコンテンツが切り離されます。

以上がこの記事の全内容です。皆様の勉強のお役に立てれば幸いです。また、123WORDPRESS.COM を応援していただければ幸いです。

以下もご興味があるかもしれません:
  • JQuery ダイアログ (JS モーダル ウィンドウ、ドラッグ可能な DIV)
  • Sortable.js ドラッグアンドドロップソートの使い方の分析
  • ドラッグ効果を実現するjs
  • JavaScript でモバイル端末のタッチスクリーンドラッグ機能を実装
  • js を使用して実装されたシンプルなドラッグ効果
  • JS は美しいウィンドウのドラッグ効果を実現します (サイズの変更、最大化、最小化、閉じるなど)
  • JS で実装したファイルのドラッグ アンド ドロップ アップロード機能の例
  • JavaScript を使用してマウス ドラッグ イベントを実装する
  • JS コンポーネント Bootstrap Table テーブル行ドラッグ効果実装コード
  • JavaScript は水平方向のプログレスバーのドラッグ効果を実装します

<<:  MySQL 関数インデックス最適化ソリューション

>>:  Linux で MySQL のスケジュールバックアップを実装する方法

推薦する

MySQL における datetime と timestamp の違いと使い方

1. MySQL で現在の時刻を表現するにはどうすればよいでしょうか?実際、表現方法はいろいろありま...

LayUI+Shiroは動的なメニューを実装し、メニュー拡張の例を記憶します

目次1. Maven 依存関係2. メニュー関連クラス1. メインメニュー2. サブメニュー3. S...

Linux システムで grub.cfg ファイルの破損を修復する手順

目次1. grub.cfg ファイルの紹介1. grub.cfg ファイルの場所2. grub.cf...

Windows 10 64 ビット版に MySQL 5.6.35 をインストールするためのグラフィック チュートリアル

1. MySQL Community Server 5.6.35をダウンロードするダウンロードアドレ...

MySQLデータベース移行により、大量のデータを迅速にエクスポートおよびインポートできます

データベースの移行は、よく遭遇する問題です。データ量が少ない場合、移行は基本的に問題になりません。実...

mysql ビュー関数の分析と使用例

この記事では、例を使用して MySQL ビューの機能と使用方法を説明します。ご参考までに、詳細は以下...

MySQL 5.7 のルートパスワードログイン問題の解決策

前回の記事でMySQLサービスが起動しない問題が解決したと分かった後、パスワードなしでrootユーザ...

iOS WeChat H5ページのゴム反発効果の落とし穴記録

ビジネス要件最近開発したプロジェクトの一つに、WeChat公式アカウントに関連したH5ページがありま...

Win10 + Ubuntu20.04 LTS デュアルシステムブートインターフェースの美化

エフェクト表示組み込みのブートインターフェースがあまりにも醜いので、テーマをダウンロードして美しくし...

JavaScript の組み込み Date オブジェクトの詳細な説明

目次日付オブジェクト日付オブジェクトの作成新しい日付()日付を取得する()取得日()月を取得する()...

Linux または Android でファイル システムを追加する属性インターフェイスを解析する方法

最初のもの: 1. 主要なヘッダーファイルを追加します。 #include <linux/of...

nginx 用の zabbix 5.0 をインストールして展開する方法

目次実験環境インストールと展開データベースをインストールして設定します (ここでは mariadb ...

MySQL 20 の高性能アーキテクチャ設計原則 (収集する価値あり)

オープンソース データベース アーキテクチャの設計原則01. 技術の選択最も使い慣れていて、最大限に...

HTMLタグオーバーフロー処理アプリケーション

CSSを使用してスクロールバーを変更する1.コンテンツがオーバーフローした場合のオーバーフロー設定水...

RocketMQ の Docker インストールとインストール中に発生した問題の解決策

目次rocketmqイメージを取得する名前rvを作成する単一のブローカーノードを作成するrocket...