This is the 7th day of my participation in the August Better Writing Challenge

(Case effect: drag box in the screen) recently encountered some small knowledge points in the work, now write a small demo, for the need of friends to reference

Effect:

First of all, we don’t rush to see the demand. Let’s analyze it first:

  • Location characteristics: Drag, the mouse in the box position unchanged;Box new position = new mouse position - the beginning position of the mouse inside the box;
    • Mouse position inside the box = mouse position - box position (offsetLeft)
  • Perform characteristics:First,The mouse drops into the box,againMoving around on the page,The lastMouse keys up; Complete a drag to; Switch the thought
    • Before mouse drop, set the switch to off state, state: did not click flag = false;
    • First the mouse drops in the box, state: already clicked, flag= true;
    • againMove on the page
      • Check whether you are in the click state:
        • True: mobile computing;
        • False: do not perform mobile calculation.
    • State: restores to no click, flag= false;

HTML part:

<div class="p" id="box">
Copy the code

The CSS part:

* {
            margin: 0;
            padding: 0;
        }
        
        html {
            width: 100%;
        }
        
        body {
            width: 100%;
            height: 2000px;
        }
        
        .p {
            width: 600px;
            height: 300px;
            background-color: #ccc;
            overflow: hidden;
            position: absolute;
            top: 50px;
            left: 50px;
        }
Copy the code
//1. Get the DOM node
    var box = document.querySelector("#box");

    // Three steps
    //1. Click the mouse button
    // Who counts?
    var x_start = 0;
    var y_start = 0;
    // We need the idea of a switch to control the end and stop at the end
    var flag = false;
    box.addEventListener('mousedown'.function(e) {
        // To get the distance to the left of the mouse distance inside the margin, and the distance above the margin
        x_start = e.pageX - box.offsetLeft;
        y_start = e.pageY - box.offsetTop;
        // console.log(x_start, y_start);
        flag = true;
    });
    / / 2. Mobile
    The mouse inside the box is not moving, so who is moving?
    document.addEventListener('mousemove'.function(e) {
        // Now we need to subtract the fixed values of x_start and y_start from the pageX and pageY of the new mouse
        if (flag == true) {
            var left = e.pageX - x_start;
            var top = e.pageY - y_start;
            // The new box is set to the left, the distance on the distance has been calculated, now it can be assigned
            box.style.top = `${top}px`;
            box.style.left = `${left}px`; }});//3. Release the mouse
    // The last step, who will operate, mouse
    box.addEventListener('mouseup'.function() {
        flag = false;
    });
Copy the code

If you have any questions, please comment below and I will answer them in time