CODEWITHSUNDEEP
jqueryjquery-ui
Hortitude
Hortitude

Reputation: 14058

jquery draggable auto scroll disappears when scrolled on

I have a jquery scrollable that is not constrained to be within it's parent. When I drag it such that it forces the body to autoscroll beyond it's width it "looks" like things are working.

However, when I click on my element after this point it gets a "strange" location and appears to disappear (it has to do with the location being set to a negative value).

I noticed that even the jquery example for this stuck a very tall (and narrow) div to help with this. However, their example seems to work horizontally as well.o

Here's a link to what I'm referring to: http://hortitude.com/samples/drag_and_drop/drag_drop.html

Relevant source code:

<html>
<head>
    <script type="text/javascript">
       $(function () {
          $(".blueguy").draggable();
          $(".greenguy").draggable({ scroll: false, containment: 'parent' });
       });
    </script>

    <style type="text/css">
      .blueguy {
         background-color: #0000ff;
      }
      .greenguy {
         background-color: #00ff00;
      }
    </style>

</head>
<body style="height:100%;">
<div  style="height:100%;">
<div class="blueguy" style="width:300px; height:150px;">Drag me "off screen" such that the browser window auto scrolls.  Then click on me and I dissapear</div>
<div class="greenguy" style="width:300px; height:150px;">I am constrained to the be contained within my parent</div>


</div>
</body>
</html>

The real question is: Why does this happen? I know I could work around this with extra divs that are big, but I'm just curious as to why I see this?

Additionally, it would be interesting to know if there are other good work-arounds.

Upvotes: 3

Views: 1213

Answers (3)

Keith
Keith

Reputation: 11

Try using this 

$(".selector").draggable({ helper: "clone" });

Upvotes: 1

Pherrymason
Pherrymason

Reputation: 8067

here is a ticket for that bug:

http://bugs.jqueryui.com/ticket/5718

The bad news is that this ticket has been there for two years and no feedback from developers.

I've found a workaround to avoid this bug and it is adding position:absolute to the draggable element.

Here you can find an example: http://jsfiddle.net/hMdZj/

Upvotes: 1

Egi
Egi

Reputation: 1256

i could reproduce the behavior. but it happens not on click, it happens if you drag the element off screen and will try to drag it back after that. the effect is even stronger if you scroll to the end first, so that if you drag the element off screen to the right, first put the scrollbar to the right and then try to drag the item back to the left.

but what is your actual question?

it looks kinda buggy to me. scrolling offscreen seems kinda messy in jquery ui draggable.

funny thing is .. i tried to reproduce that behavior where i wrapped up both divs in a container and the "scrolling back" is extremly fast but the item never jumps away from under the mouse, so nothing "disappears", see here http://jsfiddle.net/hFAru/17/. would that be kind of a fix for you?

Upvotes: 2

Related Questions