JavaScript How to Dynamically Move Div by Clicking and Dragging
html, javascript, onmousedown
Solution
I think you're looking for something more like this
var mousePosition;
var offset = [0,0];
var div;
var isDown = false;
div = document.createElement("div");
div.style.position = "absolute";
div.style.left = "0px";
div.style.top = "0px";
div.style.width = "100px";
div.style.height = "100px";
div.style.background = "red";
div.style.color = "blue";
document.body.appendChild(div);
div.addEventListener('mousedown', function(e) {
isDown = true;
offset = [
div.offsetLeft - e.clientX,
div.offsetTop - e.clientY
];
}, true);
document.addEventListener('mouseup', function() {
isDown = false;
}, true);
document.addEventListener('mousemove', function(event) {
event.preventDefault();
if (isDown) {
mousePosition = {
x : event.clientX,
y : event.clientY
};
div.style.left = (mousePosition.x + offset[0]) + 'px';
div.style.top = (mousePosition.y + offset[1]) + 'px';
}
}, true);
FIDDLE
Problem
Okay it would seem like it should be simple. I need to take an already existing div and move it according to mouse position within the window. I have searched everywhere and it has led me to over-complicated ways of doing the same thing and involves the use of j-query. I need to strictly use javascript for what I am trying to do. Method : ``` var mousePosition; var div; (function createDiv(){ div = document.createElement("div"); div.style.position = "absolute"; div.style.left = "0px"; div.style.top = "0px"; div.style.width = "100px"; div.style.height = "100px"; div.style.background = "red"; div.style.color = "blue"; div.addEventListener('mousedown', handleKeyPressed, true); document.body.appendChild(div); })(); function handleKeyPressed(event) { event.preventDefault(); mousePosition = { x : event.clientX, y : event.clientY }; div.style.left = mousePosition.x; div.style.top = mousePosition.y; //alert("whoa!"); } ```