The principle and implementation of js drag effect

The drag function is mainly used to allow users to perform some customized actions, such as dragging to sort, dragging and moving pop-up boxes, etc.

Drag and drop process actions

1. Pressing the mouse will trigger the onmousedown event

2. Mouse movement triggers the onmousemove event

3. Releasing the mouse will trigger the onmouseup event

Drag principle

1. Mouse press + mouse move = drag-------event onmousedown + onmousemove

2. Release the mouse = no drag -------- stop dragging onmouseup

3. Mouse offset = drag distance

When clicking on the DOM, record the current mouse coordinates, that is, the x and y values, as well as the top and left values of the dragged DOM, and add a mouse move event in the mouse pressed callback function:

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

And add the mouse up event

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

This lift event is used to cancel the monitoring of mouse movement, because dragging can only be done when the mouse is pressed, and it will stop moving when it is lifted.

When the mouse is pressed and moved, the x and y values of the movement are recorded, then the top and left values of the dragged DOM are:
top = the top value of the DOM recorded when the mouse is pressed + (y value during movement - y value when the mouse is pressed)
left = the left value of the DOM recorded when the mouse is pressed + (x value during movement - x value when the mouse is pressed);

//Extremely simple version var div = document.querySelector("div");
    // Start listening for mouse movement events in the document when pressed // Start listening for mouse release events // Only prepare to drag when pressed div.onmousedown=function(e1){
        // When the mouse moves in the document, it cannot move on the div, because the mouse may leave the div, making it impossible to drag the div.onmousemove=function(e){
            // When the mouse moves, assign the current mouse coordinates relative to the viewport to the left and top of the element
            // Because we need to drag at the pressed position, we also need to get the upper left corner position of the mouse relative to the div when the key is pressed. // Use the current mouse position minus the upper left corner position of the relative element to ensure that the mouse is dragged at the pressed 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 move 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 upgraded version 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 the document, otherwise the content will be detached

The above is the full content of this article. I hope it will be helpful for everyone’s study. I also hope that everyone will support 123WORDPRESS.COM.

You may also be interested in:

JQuery Dialog (JS modal window, draggable DIV)
Analysis of how to use Sortable.js drag and drop sorting
js to achieve drag effect
JavaScript implements touch screen drag function on mobile terminal
Simple drag effect implemented using js
JS realizes beautiful window drag effect (can change size, maximize, minimize, close)
Example of file drag and drop upload function implemented by JS
Using javascript to implement mouse drag events
JS component Bootstrap Table table row drag effect implementation code
JavaScript implements horizontal progress bar drag effect

<<: Detailed explanation of several error handling when Nginx fails to start

>>: How to implement scheduled backup of MySQL in Linux