jQuery draggable element disappears when scrolling

I have divs that are draggable using jQuery, but when I drag an element from the bottom of the page upward toward the top, as soon as the scroll starts to happen it seems like the element just flies away from the mouse cursor. If you keep the mouse button held down and release it where you wanted to drop the element, the drop works just fine, but for some reason the element itself disappears.

Also, if I move the mouse cursor up so that the window scrolls upward and the element flies away, then I go back down to where the element originally was, the element "flies back" toward the cursor.

I have explicitly set all of the scrolling options in the draggable function, but to no avail.

      $('.draggable').draggable({
         revert: true,
         scroll: true,
         scrollSensitivity: 20,
         scrollSpeed: 20
      });

has anyone ever seen or heard of this problem before? If so, is there a fix? Thanks in advance.

EDIT: Here are some simple conditions that cause me to see the issue as described:

using this HTML:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd"&gt;
<html>

  <head> 
    <title></title>

    <script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"&gt;&lt;/script&gt;
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.3/jquery-ui.min.js"&gt;&lt;/script&gt;

    <script type="text/javascript">
      $(document).ready( function() {
        $('.draggable').draggable();
      });
    </script>
  </head>

  <body>
    <p>
      Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Vivamus elementum. Morbi consectetuer consectetuer eros. Phasellus augue. Donec turpis nulla, iaculis eu, consectetuer et, lacinia quis, nunc. Etiam sed ante. Suspendisse eleifend aliquam quam. Ut lobortis erat et urna. Praesent in elit. Cras mattis volutpat felis. Phasellus est urna, sollicitudin ac, vestibulum sit amet, semper sit amet, justo. Vestibulum commodo ullamcorper nulla. Nulla ac eros ac ligula ullamcorper lobortis. Donec in nunc eu metus scelerisque convallis. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Duis porta, leo sed facilisis molestie, ante sem congue nisi, eget laoreet turpis est vel nisi. Ut tortor nibh, pulvinar et, venenatis vitae, volutpat quis, enim. Aliquam fermentum tortor vitae lacus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae
     <!-- a bunch more lipsum so window has to scroll to drag bottom element upward -->
      Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Vivamus elementum. Morbi consectetuer consectetuer eros. Phasellus augue. Donec turpis nulla, iaculis eu, consectetuer et, lacinia quis, nunc. Etiam sed ante. Suspendisse eleifend aliquam quam. Ut lobortis erat et urna. Praesent in elit. Cras mattis volutpat felis. Phasellus est urna, sollicitudin ac, vestibulum sit amet, semper sit amet, justo. Vestibulum commodo ullamcorper nulla. Nulla ac eros ac ligula ullamcorper lobortis. Donec in nunc eu metus scelerisque convallis. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Duis porta, leo sed facilisis molestie, ante sem congue nisi, eget laoreet turpis est vel nisi. Ut tortor nibh, pulvinar et, venenatis vitae, volutpat quis, enim. Aliquam fermentum tortor vitae lacus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae

      </p>

        <div class="smallArticle draggable" id="wrapper" style="background-color: pink; width: 300px;">
          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc in risus metus, non venenatis nisi. Nam interdum euismod libero eget mollis.
        </div>
  </body>

</html>

if I try to drag the pink element at the bottom upward toward the top of the window, as soon as it starts scrolling it "flies away".

This occurs both in FF 3.6.9 and IE8 on Windows Vista

ansaurus

tags:

views:

answers:

jQuery draggable element disappears when scrolling

related questions