Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 3 of 3
  1. #1
    New to the CF scene
    Join Date
    Jul 2010
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Moving a div with my mouse cursor?

    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!

  • #2
    Regular Coder
    Join Date
    Feb 2010
    Posts
    104
    Thanks
    5
    Thanked 3 Times in 3 Posts
    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/

  • #3
    Regular Coder
    Join Date
    Mar 2009
    Location
    Portland Oregon
    Posts
    690
    Thanks
    44
    Thanked 63 Times in 62 Posts
    Quote Originally Posted by nicky22 View Post
    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
    Code:
    
    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"
    }
    }


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •