Javascript move div on click

Question

Question

We would like to know how to move element position.

Table of Contents Show

JavaScript move div
Draggable DIV Element
Create a Draggable DIV Element

Answer


<!DOCTYPE html>
<html>
<body>
  <a id="button">Click me to move down the div</a>
  <div id="player" style="position: absolute;">player</div>
    <script type='text/javascript'>
    <!--  w  w  w. j a  v  a 2  s  . c o m-->
        var player = document.getElementById("player");
        var button = document.getElementById("button");
        function moveDown(object) {
          object.style.top = parseInt(object.style.top || 0) + 32 + 'px';
        }
        button.onclick = function() {
            moveDown(player);
        }
    
    </script>
</body>
</html>

The code above is rendered as follows:

JavaScript move div

This section illustrates you how to move a div element on the window using JavaScript.

In the following code, we have defined a div element consisting of text 'Hello World' in order to move it on the browser. For this, we have used onClick event handler to specifiy what should happen when the mouse is clicked on the window. The properties clientX and clientY of event object indicates the cursor's horizontal and vertical position when the event occurs relative to the upper-left corner of the window and the pageX and pageY provide coordinates in the document's space. To set the element top position relative to the next element top edge we have used the property style.top and the style.left sets the position of the left edge of an element relative to the left edge of the next element. This code works correctly on Internet Explorer.

Here is the code:

<html>
<h2>Move div</h2>
<script type="text/javascript">
var X, Y;
window.document.onclick=moveDiv;
function moveDiv(){
X = (document.layers) ? e.pageX :event.clientX
Y = (document.layers) ? e.pageY :event.clientY
document.getElementById('div').style.position="absolute";
document.getElementById('div').style.left=X;
document.getElementById('div').style.top=Y;
}
</script>
<div id="div" style="width:85px;height:32px;border:solid;">Hello World</div>
</html>

Output will be displayed as:

If you click anywhere on the window, the element will move to that position.

Download Source Code:

Learn how to create a draggable HTML element with JavaScript and CSS.

Draggable DIV Element

Create a Draggable DIV Element

Step 1) Add HTML:

Example

<div id="mydiv">

<div id="mydivheader">Click here to move</div>
<p>Move</p>
<p>this</p>
<p>DIV</p>
</div>

Step 2) Add CSS:

The only important style is position: absolute, the rest is up to you:

Example

#mydiv {
position: absolute;
z-index: 9;
background-color: #f1f1f1;
border: 1px solid #d3d3d3;
text-align: center;
}

#mydivheader {
padding: 10px;
  cursor: move;
  z-index: 10;
background-color: #2196F3;
  color: #fff;
}

Step 3) Add JavaScript:

Example

// Make the DIV element draggable:
dragElement(document.getElementById("mydiv"));

function dragElement(elmnt) {
var pos1 = 0, pos2 = 0, pos3 = 0, pos4 = 0;
if (document.getElementById(elmnt.id + "header")) {
    // if present, the header is where you move the DIV from:
    document.getElementById(elmnt.id + "header").onmousedown = dragMouseDown;
} else {
    // otherwise, move the DIV from anywhere inside the DIV:
    elmnt.onmousedown = dragMouseDown;
}

function dragMouseDown(e) {
    e = e || window.event;
    e.preventDefault();
    // get the mouse cursor position at startup:
    pos3 = e.clientX;
    pos4 = e.clientY;
    document.onmouseup = closeDragElement;
    // call a function whenever the cursor moves:
    document.onmousemove = elementDrag;
}

function elementDrag(e) {
    e = e || window.event;
    e.preventDefault();
    // calculate the new cursor position:
    pos1 = pos3 - e.clientX;
    pos2 = pos4 - e.clientY;
    pos3 = e.clientX;
    pos4 = e.clientY;
    // set the element's new position:
    elmnt.style.top = (elmnt.offsetTop - pos2) + "px";
    elmnt.style.left = (elmnt.offsetLeft - pos1) + "px";
}

function closeDragElement() {
    // stop moving when mouse button is released:
    document.onmouseup = null;
    document.onmousemove = null;
}
}

Try it Yourself »

kode javascript Moving div