Loading ...
Sorry, an error occurred while loading the content.

Drag and drop with overflow problem

Expand Messages
  • tm8747a
    I m experiencing a problem with the drag and drop functionality in Firefox when trying to drag from a div with an overflow set to auto. Basically, the problem
    Message 1 of 1 , Jun 1, 2006
    • 0 Attachment
      I'm experiencing a problem with the drag and drop functionality in
      Firefox when trying to drag from a div with an overflow set to auto.
      Basically, the problem occurs because the div simply scrolls down when
      the dragged element goes off its boundaries. Has anybody come up with
      any solution for this behavior? Seems that one way around the problem
      would be to force the draggable element to an absolute position, in
      which case things work fine. But was wondering if there was already
      some kind of fix out there instead of reinventing the wheel. Here's
      some code to demonstrate what I'm talking about. One box has an
      overflow-y set to auto and the overflow-x set to hidden and the other
      has no overflow style set. Then item inside the box with no overflow
      can be dragged anywhere, whereas the one inside the box with the
      overflow set cannot. Thanks in advance for any help.

      -Thomas

      <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
      "http://www.w3.org/TR/html4/loose.dtd">

      <html>
      <head>
      <title>Untitled</title>
      <script src="lib/yui/yahoo/yahoo-min.js"></script>
      <script src="lib/yui/dom/dom-min.js"></script>
      <script src="lib/yui/event/event-min.js"></script>
      <script src="lib/yui/dragdrop/dragdrop-min.js"></script>

      <style>
      div#box1 {
      height:200px;
      width:300px;
      overflow-y:auto;
      overflow-x:hidden;
      background-color:#FF0000;
      }

      div#box2 {
      height:200px;
      width:300px;
      background-color:#FFFF00;
      }
      </style>
      </head>

      <body>

      <div id="box1">
      <span id="drag1" style="">Draggable item 1</span>
      </div>

      <div id="box2">
      <span id="drag2">Draggable item 2</span>
      </div>

      <script language="javascript">
      new YAHOO.util.DD("drag1");
      new YAHOO.util.DD("drag2");
      </script>

      </body>
      </html>
    Your message has been successfully submitted and would be delivered to recipients shortly.