Breaking News: Grepper is joining You.com. Read the official announcement!

move div with the mouse in js

Mohamed answered on February 1, 2022 Popularity 10/10 Helpfulness 5/10

answer move div with the mouse in js

move div with the mouse in js

Comment

// <body>

//     <div id="item"></div>
//     <div id="item1"></div>

// </body>

{
    /* <style>

    #item,#item1 {
        height: 50px;
        width: 50px;
        position: absolute;
        background: rgba(255, 166, 0, 0.562);
    } 

    </style> */
}

function moveElementDoc(id) { // id is parameter


    const element = document.getElementById(id); // we will call our id from html with this parameter

    let heightEl = element.clientHeight / 2; // half height (clientHeight = height of div)
    let widthEl = element.clientWidth / 2; //half width
    //we need it, to center our mouse in our div

    element.addEventListener("mousedown", function() {
        document.addEventListener("mousemove", movingmouse);

        function movingmouse(e) {
            element.style.position = "absolute";
            element.style.left = e.clientX - heightEl + 'px'; // position-div-"id" = positionMoveMouse"x" and "y" like bottom - height"let heightEl"
            element.style.top = e.clientY - widthEl + 'px';
            
        }

        document.addEventListener("mouseup", function() {
            document.removeEventListener("mousemove", movingmouse)
        })
    })
}


moveElementDoc("item"); //Call id in your html and place id in your getelementbyid from the parameter of function
moveElementDoc("item1");

Popularity 10/10 Helpfulness 5/10 Language javascript

Source: Grepper

Tags: javascript mouse move

Link to this answer
Share Copy Link

Contributed on Feb 01 2022

Mohamed

0 Answers Avg Quality 2/10

move div with the mouse in js

Contents

More Related Answers

move div with the mouse in js

Grepper

Documentation

Social

Legal

Contact

Oops, You will need to install Grepper and log-in to perform this action.