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

document.addEventListener("mousemove", 移動中, false)

document.addEventListener("mouseup",function() {
document.removeEventListener("mousemove", 移動中, false);
}、 間違い）;

// 非常にシンプルなバージョン 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)
        }
}