...

View Full Version : Moving a div with my mouse cursor?



nicky22
07-15-2010, 08:44 PM
Do you guys have any idea how I could move a div around a page on mouse down? Like drag and drop it where I want it to be on the page and grab its x,y position?

If you guys have any code snippets or tips that would be greatly appreciated thanks!

semiSkim
07-15-2010, 10:34 PM
the yui libary has a drag and drop element, although I imagine it's going to be a nightmare to implement, my experience with their API's has been awful! Worth a try though!

http://developer.yahoo.com/yui/dragdrop/

TinyScript
07-15-2010, 10:35 PM
Do you guys have any idea how I could move a div around a page on mouse down? Like drag and drop it where I want it to be on the page and grab its x,y position?

If you guys have any code snippets or tips that would be greatly appreciated thanks!


first create an object to hold the mouse position
then create a function for the the mouse move

Now whenever the mouse moves, the MOUSE object will have the x,y coords
Then you crate a function to pass the MOUSE x and y to your element

Next you need to have a mousedown and mouseup functions to handle a boolean which will determine if dragging is on or off




var MOUSE={x:0,y:0}
var mousedown=false

docuemnt.onmousedown=function(){mousedown=true}
docuemnt.onmouseup=function(){mousedown=false}
document.onmousemove=function(e){ MOUSE={x:e.clientX,y:e.clientY};handleDivMove()}



function handleDivMove(){

if (mousedown){
element.style.left=MOUSE.x+"px"
element.style.top=MOUSE.y+"px"
}
}



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum