Das Prinzip und die Implementierung des JS-Drag-Effekts

document.addEventListener("mousemove", verschieben, false)

document.addEventListener("mouseup",Funktion() {
document.removeEventListener("mousemove", verschieben, false);
}, FALSCH);

//Extrem einfache Version var div = document.querySelector("div");
    // Beim Drücken mit dem Warten auf Mausbewegungsereignisse im Dokument beginnen // Beim Loslassen der Maus mit dem Warten beginnen // Ziehen nur beim Drücken vorbereiten div.onmousedown=function(e1){
        // Wenn sich die Maus im Dokument bewegt, kann sie sich nicht auf dem div bewegen, da die Maus das div verlassen könnte, wodurch es unmöglich würde, das div zu ziehen.onmousemove=function(e){
            // Wenn sich die Maus bewegt, werden die aktuellen Mauskoordinaten relativ zum Ansichtsfenster links und oben im Element zugewiesen
            // Da wir an der gedrückten Position ziehen müssen, müssen wir auch die Position der oberen linken Ecke der Maus relativ zum Div ermitteln, wenn die Taste gedrückt wird. // Aktuelle Mausposition abzüglich der Position der oberen linken Ecke des relativen Elements verwenden, um sicherzustellen, dass die Maus an der gedrückten Position gezogen wird. div.style.left=e.clientX-e1.offsetX+"px";
            div.style.top=e.clientY-e1.offsetY+"px";
        }
        // Wenn die Maustaste losgelassen wird, lösche das Mausbewegungsereignis und lösche das Mausloslassenereignis div.onmouseup=function(){
            Dokument.onmousemove=null;
            Dokument.onmouseup=null;
        }
    }

//Einfache Version var div = document.querySelector("div");
    var OffsetX, OffsetY;
    div.addEventListener("mousedown",mouseDownHandler);

    Funktion mouseDownHandler(e){
        offsetX=e.offsetX
        offsetY=e.offsetY
        document.addEventListener("Mausbewegung",MausbewegungsHandler)
        document.addEventListener("mouseup",mouseupHandler)
    }

    Funktion MausbewegungsHandler(e){
        div.style.left=e.clientX-offsetX+"px"
        div.style.top=e.clientY-offsetY+"px"
    }

    Funktion mouseupHandler(e){
        document.removeEventListener("Mausbewegung",MausbewegungsHandler)
        document.removeEventListener("mouseup",mouseupHandler)
    }

// Einfache aktualisierte Version var div = document.querySelector ("div");
    var OffsetX, OffsetY;
    div.addEventListener("Maus gedrückt",MausHandler);

    Funktion MausHandler(e){
        wenn(e.type==="mousedown"){
            offsetX=e.offsetX;
            offsetY=e.offsetY;
            document.addEventListener("Mausbewegung",MausHandler)
            document.addEventListener("Maus hoch",MausHandler)
        }sonst wenn(e.type==="mousemove"){
            div.style.left=e.clientX-offsetX+"px"
            div.style.top=e.clientY-offsetY+"px"
        }sonst wenn(e.type==="mouseup"){
            document.removeEventListener("Mausbewegung",MausHandler)
            document.removeEventListener("Maus hoch",MausHandler)
        }
}