SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    SitePoint Enthusiast
    Join Date
    Nov 2007
    Posts
    51
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Draggable element and variable window widths

    I have an element on a web page that can a user can drag, but I need to make it so they won't be able to drag it past the edges of the screen. The main container is centered horizontally and the draggable element uses absolute positioning.

    I know how to detect the window width across various browsers, but I'm not quite sure how to stop the element on the left and right sides. For some reason, the draggable element's left 0 position is located at the left side of the container (instead of the left side of the window).

    Can someone point me in the right direction as to how to accomplish this?

  2. #2
    SitePoint Guru Ize's Avatar
    Join Date
    Nov 2005
    Location
    The Netherlands
    Posts
    808
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Indeed, the "registration point" (by lack of a better term), is located at the top left corner of an element. It's easy to figure out the outer right point, though, by using:
    Code:
    parseInt (element.style.left) + parseInt (element.style.width)
    Or some variation on that.
    I would check the position of the element in the mousemove handler, so every time the element is dragged by even a pixel, the script checks to see if the element doesn't move outside the boundaries of the window.

    A little dummy code to get you started:

    Code Javascript:
    // inside the mousemove handler:
     
    var leftPos = parseInt(element.style.left);
    var topPos = parseInt(element.style.top);
    var rightPos = leftPos + parseInt(element.style.width);
    var bottomPos = topPos + parseInt(element.style.height);
    // fetch the window size, you probably have a custom function for this
    var windowWidth = fetchWindowWidth();
    var windowHeight = fetchWindowHeight();
     
    // check horizontal
    if (leftPos < 0) { // element is over the left boundary
      element.style.left = '0px';
    } elseif (rightPos > windowWidth) { // element is over right boundary
      element.style.left = (windowWidth - parseInt (element.style.width)) + 'px';
    }
    // check vertical
    if (topPos < 0) { // element is over top boundary
      element.style.top = '0px';
    } elseif (bottomPos > windowHeight) { // element is over bottom boundary
      element.style.top = (windowHeight - parseInt(element.style.height)) + 'px';
    }

    Play around with this, hope it helps

  3. #3
    Google Engineer polvero's Avatar
    Join Date
    Oct 2003
    Location
    Mountain View
    Posts
    567
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Drag and Drop can become very complicated, and you'll most likely split hairs if you're trying to reinvent the drag and drop wheel - and make it cross-browser. YUI has a Drag and Drop utility: http://developer.yahoo.com/yui/dragdrop/
    There is a particular demo that might be of your interest which encapsulates draggable elements within a region:
    http://developer.yahoo.com/yui/examp...dd-region.html

    In your case, your region is the entire browser viewport (Dom.getViewportWidth and Dom.getViewportHeight). Hopefully that gets you in the right direction.

  4. #4
    Git-R-Done
    Join Date
    Nov 2001
    Posts
    1,194
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Where would Dom.getViewportWidth and Dom,getViewportHeight need to be defined? In the example, the region is defined in:

    var region = Dom.getRegion(this.cont);
    Last edited by JohnSaunders; Nov 29, 2007 at 10:50.
    John Saunders


Bookmarks

Posting Permissions

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