Principle and Implementation of js Drag Effect

Drag-and-drop function is mainly used to allow users to do some custom actions, such as dragging sort, pop-up box dragging and moving, and so on

Drag flow action

1. Press the mouse to trigger the onmousedown event

2. The mouse movement will trigger the onmousemove event

3. Releasing the mouse will trigger the onmouseup event

Drag principle

1. Mouse Press + Mouse Move = Drag----Event onmousedown + onmousemove

2. Mouse Release = No Drag-----Stop Drag onmouseup

3. Mouse offset = drag distance

When clicking dom, record the current mouse coordinate values, that is, x, y values, and top, left values of dragged dom, and add mouse movement events in the callback function of mouse press:

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

And add mouse lift events

document.addEventListener( " mouseup " ,function() {
document.removeEventListener( " mousemove " , moving, false);
}, false);

This lift event is to release the mouse movement monitoring, because only when the mouse can be dragged down, lift will stop not moving.

When the mouse is pressed to move, record the moving x and y values, then the dragged top and left values of dom are:
top = top value of dom recorded when mouse is pressed + (y value in motion-y value when mouse is pressed)
left = left value of dom recorded when the mouse is pressed + (x value in motion-x value when the mouse is pressed);

// Extremely simple version 
   var div=document.querySelector("div");
    //  When pressed, start listening for mouse movement events in the document 
    //  Start listening for mouse release button events 
    //  Ready to drag only when pressed 
    div.onmousedown=function(e1){
        //  When the mouse moves over the document, you can no longer div Move on, because the mouse may leave div Unable to drag and drop 
        div.onmousemove=function(e){
            //  When the mouse moves, assigns the coordinates of the current mouse relative to the viewport to the left And top
            //  Because we need to drag and drop in the pressed position, we also need to get the mouse relative to the pressed button div Position of the upper left corner of 
            //  Use the current mouse position minus the upper left corner of this relative element to ensure that the mouse is dragged at the position 
            div.style.left=e.clientX-e1.offsetX+"px";
            div.style.top=e.clientY-e1.offsetY+"px";
        }
        //  When the mouse button is released, delete the mouse movement event and delete the mouse release event 
        div.onmouseup=function(){
            document.onmousemove=null;
            document.onmouseup=null;
        }
    }

// Simple version 
    var div=document.querySelector("div");
    var offsetX,offsetY;
    div.addEventListener("mousedown",mouseDownHandler);

    function mouseDownHandler(e){
        offsetX=e.offsetX
        offsetY=e.offsetY
        document.addEventListener("mousemove",mousemoveHandler)
        document.addEventListener("mouseup",mouseupHandler)
    }

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

    function mouseupHandler(e){
        document.removeEventListener("mousemove",mousemoveHandler)
        document.removeEventListener("mouseup",mouseupHandler)
    }

//  Simple upgrade 
    var div=document.querySelector("div");
    var offsetX,offsetY;
    div.addEventListener("mousedown",mouseHandler);

    function mouseHandler(e){
        if(e.type==="mousedown"){
            offsetX=e.offsetX;
            offsetY=e.offsetY;
            document.addEventListener("mousemove",mouseHandler)
            document.addEventListener("mouseup",mouseHandler)
        }else if(e.type==="mousemove"){
            div.style.left=e.clientX-offsetX+"px"
            div.style.top=e.clientY-offsetY+"px"
        }else if(e.type==="mouseup"){
            document.removeEventListener("mousemove",mouseHandler)
            document.removeEventListener("mouseup",mouseHandler)
        }
}

Note

a, the style of the dragged element must be set to absolute or relative position to be effective.
b, drag and drop to document, otherwise the content will be detached