I would like to know , how to position a div block dynamically to the place where mouse clicks.

I know how to get the value of coordinates of click dynamically.

I want to know how we can move the div block to that coordinate.

I tried the following codes in SO, but nothing is working

document.getElementById('someID').style.position='absolute';
document.getElementById('someID').style.left='500px';
document.getElementById('someID').style.top='90px';

and the below code

var d = document.getElementById('yourDivId');
d.style.position = "absolute";
d.style.left = x_pos;
d.style.top = y_pos;

Can anyone tell me how to do it. Thanks,

I would like to know , how to position a div block dynamically to the place where mouse clicks.

I know how to get the value of coordinates of click dynamically.

I want to know how we can move the div block to that coordinate.

I tried the following codes in SO, but nothing is working

document.getElementById('someID').style.position='absolute';
document.getElementById('someID').style.left='500px';
document.getElementById('someID').style.top='90px';

and the below code

var d = document.getElementById('yourDivId');
d.style.position = "absolute";
d.style.left = x_pos;
d.style.top = y_pos;

Can anyone tell me how to do it. Thanks,

• javascript
• html
• css
• angularjs

• Please post your actual code, including the code that retrieves the mouse coordinates and possibly add a jsFiddle (or similar) to show the issue as the code you posted, setting the styles, works just fine by itself: http://jsfiddle/5S7ue/ – Nope Commented May 30, 2014 at 8:00
• jsfiddle/zNy4C something like that – Oleksandr T. Commented May 30, 2014 at 8:04

7 Answers 7

You have missed the units in your position assigning sentence.

To get the mouse position (on click):

(function() {
    window.onmousedown = handleMouseMove;
    function handleMouseMove(event) {
        event = event || window.event; // IE-ism
        console.log(event.clientX);
        moveDiv(event.clientX,event.clientY);
    }
})();

Then send the position to a function to change the position of your div, adding the pixels unit, don't forget it!

function moveDiv(x_pos,y_pos){
    var d = document.getElementById('myDiv');
    d.style.left = x_pos + "px";
    d.style.top = y_pos + "px";
}

Full Code:

(function() {
    window.onmousedown = handleMouseMove;
    function handleMouseMove(event) {
        event = event || window.event; // IE-ism
        console.log(event.clientX);
        moveDiv(event.clientX,event.clientY);
    }
})();

function moveDiv(x_pos,y_pos){
    var d = document.getElementById('myDiv');
    d.style.left = x_pos + "px";
    d.style.top = y_pos + "px";
}

DEMO

try document.body.addEventListener('click', function(e) {console.log(e)}) you got a mouseevent object where its properties clientX, clientY gives the location of mouse click. You can then use this to re-position your div.

You need to add px after d.style.left and d.style.top.

Try this:

<style>
#someID {
    position:absolute;
    left: 0px;
    top: 0px;
    height: 50px;
    width: 50px;
    background: red;
}
</style>


<div id="someID">
</div>

<script>

var ele = document.getElementById('someID');
document.onclick = function(e) {    
    ele.style.top = e.offsetY + "px";
    ele.style.left = e.offsetX + "px";
}

</script>

Here is an example: http://jsfiddle/s99d4/

JS

var a = document.getElementById('a');

document.onclick = function(e){  
      a.style.top = e.clientY + 'px';
      a.style.left = e.clientX + 'px'
}

CSS

div {
    position: absolute;    
}

JSFiddle

You can use this simple line of Jquery instead of going those plicated routes.

$("#divId").hide();


$('body').click(function(event) {
  $("#divId").show().css( {position:"absolute", top:event.pageY, left: event.pageX});
});

First you hide the div you want to move (OR don't hide it)

Then move it wherever the user clicks. See FIDDLE

EDIT: Never mind, not all of them look so plicated anymore... Goodluck. :)

Hope this helps.

Mike

Use

d.style.position = "absolute";
d.style.top = "980px"; //or whatever
d.style.left = "970px"; //or whatever

Remember that d.style.top is the y-axis and d.style.left is the x-axis. Therefore,

d.style.top = e.clientY + "px";
           d.style.left = e.clientX + "px";

Here is a full function for this code:

document.onmousemove = getCoords;

function getCoords(e) {
e = e || window.event;
var x = e.clientX;
var y = e.clientY;
var div = document.getElementById("MYDIV");
div.style.position = "absolute";
div.style.top = y + "px";
div.style.left = x + "px";
}