CODEWITHSUNDEEP
javascripthtmlcssangularjs
surendher
surendher

Reputation: 1378

How to move a "div" to certain coordinates using Javascript?

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,

Upvotes: 2

Views: 4767

Answers (7)

Cannicide
Cannicide

Reputation: 4520

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";
}

Upvotes: 0

Cannicide
Cannicide

Reputation: 4520

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";

Upvotes: 0

Fizor
Fizor

Reputation: 1530

You can use this simple line of Jquery instead of going those complicated 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 complicated anymore... Goodluck. :)

Hope this helps.

Mike

Upvotes: 0

jhyap
jhyap

Reputation: 3837

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

Upvotes: 0

Benjamin Albert
Benjamin Albert

Reputation: 748

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.net/s99d4/

Upvotes: 0

Rafa Romero
Rafa Romero

Reputation: 2716

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

Upvotes: 3

konghou
konghou

Reputation: 557

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.

Upvotes: 0

Related Questions