#12868 new bug ()

Opened May 27, 2015 03:32AM UTC

Last modified May 27, 2015 09:07PM UTC

Fixed Position Draggable Element Scrolls Offscreen

Reported by: NMcCloud Owned by:
Priority: minor Milestone: none
Component: ui.draggable Version: 1.11.4
Keywords: Cc:
Blocked by: Blocking:
Description

If a fixed position element is made draggable, and that element is then moved beyond the scrollbar region, it will accelerate off screen. The only way this behavior does not occur is if the scroll is already at the top or bottom of the window. Its rather comical.

This used to work in 10.4, which I am trying to migrate from (i.e. it would simply push the element at a constant rate up or down)

<div id="a" style="width:50px;height:100px;position:fixed;top:300px;left:200px;background:red"></div>

<div style="width:50px;height:5000px;position:absolute;background:blue"></div>

<script>

$("#a").draggable();

</script>

Attachments (0)
Change History (2)

Changed May 27, 2015 03:37AM UTC by NMcCloud comment:1

Replying to [ticket:12868 NMcCloud]:

If a fixed position element is made draggable, and that element is then moved beyond the scrollbar region, it will accelerate off screen. The only way this behavior does not occur is if the scroll is already at the top or bottom of the window. Its rather comical. This used to work in 10.4, which I am trying to migrate from (i.e. it would simply push the element at a constant rate up or down) <div id="a" style="width:50px;height:100px;position:fixed;top:300px;left:200px;background:red"></div> <div style="width:50px;height:5000px;position:absolute;background:blue"></div> <script> $("#a").draggable(); </script>

Here is the jsbin: http://jsbin.com/kuhebusixi/1/edit?html,output

Thanks,

Ken

Changed May 27, 2015 09:07PM UTC by NMcCloud comment:2

I hacked the draggable widget (_mouseStart, and _mouseStop), turning off the scroll option if the element being dragged is either fixed or is in a fixed parent. Apparently, the scroll plugin is what is causing the element to accelerate off the screen when the mouse is pulled to the top or bottom of the screen.

See: http://jsbin.com/supuxekuqo/1/edit

Thanks,

Ken