Opened 10 years ago

Closed 10 years ago

#9560 closed bug (duplicate)

jQuery UI Draggable + Sortable - drag object offset by offsetTop in non webkit browswers

Reported by: KirkSmith Owned by: KirkSmith
Priority: minor Milestone: none
Component: ui.draggable Version: 1.10.3
Keywords: Cc:
Blocked by: Blocking:


Take the demo from for 'jQuery UI Draggable + Sortable', add a div prior to the unordered list. Give it a few hundred pixels height. Now, reduce the height of the browser window so it will scroll. Scroll the div out of view. Now try to drag the draggable element. While dragging, the position of the cloned element will be offset from the cursor by the same amount that the document is scrolled in the window. This problem exists at least on IE10, Opera 12, Firefox 24, but not on webkit browsers (Chrome/Opera 16/Safari). I haven't tried others. Somehow, the element appears to be getting fixed positioning, relative to the window, when the computed position appears to be absolute, relative to the document. Perhaps it has something to do with the clone helper for the draggable widget. If I get time, I'll try to dig into it some more.

Kirk Smith

Change History (5)

comment:1 Changed 10 years ago by tj.vantoll

Owner: set to KirkSmith
Status: newpending

Hi KirkSmith,

Thanks for taking the time to contribute to the jQuery UI project. When you say "add a div prior to the unordered list", are you dynamically creating a div in the dev tools?

If so could you please create an isolated test case that shows the problem you're experiencing. You can use this as a starting point:


comment:2 Changed 10 years ago by KirkSmith

Status: pendingnew

jsfiddle didn't exhibit this problem, so I am including a short test case, which is a slightly amended version of the example on

<!doctype html> <html lang="en">


<meta charset="utf-8" /> <title>jQuery UI Draggable + Sortable</title> <link rel="stylesheet" href="" /> <script src=""></script> <script src=""></script> <link rel="stylesheet" href="/resources/demos/style.css" /> <style>

ul { list-style-type: none; margin: 0; padding: 0; margin-bottom: 10px; } li { margin: 5px; padding: 5px; width: 150px; } #spacefiller { height: 100px; border: 1px black solid;}

</style> <script>

$(function() {

$( "#sortable" ).sortable(); $( "#draggable" ).draggable({

connectToSortable: "#sortable", helper: "clone"

}); $( "ul, li" ).disableSelection();



</head> <body>

<div id="spacefiller">

This could be any HTML element that has vertical space.... This problem only exists in non webkit browsers and it doesn't appear that it is exhibited in jsfiddle, which seems to adjust the scrolling position.

</div> <ul>

<li id="draggable" class="ui-state-highlight">Drag me down</li>

</ul> <ul id="sortable">

<li class="ui-state-default">Item 1</li> <li class="ui-state-default">Item 2</li> <li class="ui-state-default">Item 3</li> <li class="ui-state-default">Item 4</li> <li class="ui-state-default">Item 5</li>




comment:3 Changed 10 years ago by tj.vantoll

Status: newpending

I'm fairly confident that this is a duplicate of #9315, and the reason you're not seeing the issue in jsFiddle is because the test case I provided is using the latest code from master and not 1.10.3. Please let us know if you can recreate the problem using these files.

<script src=""></script> <script src=""></script>

In jsFiddle you can always add "/show" to a URL to see the test case without the framing (e.g.


Version 0, edited 10 years ago by tj.vantoll (next)

comment:4 Changed 10 years ago by KirkSmith

Status: pendingnew

The problem is fixed in the pre release. Thanks

comment:5 Changed 10 years ago by tj.vantoll

Resolution: duplicate
Status: newclosed

Duplicate of #9315.

Note: See TracTickets for help on using tickets.