Home/ Questions/Q 7072109
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-28T05:46:08+00:00

I have a jquery scrollable that is not constrained to be within it’s parent.

  • 0

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.

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    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?

    • 0