Skip to main content

Search and Top Navigation

#9560 closed bug (duplicate)

Opened September 18, 2013 12:05AM UTC

Closed September 19, 2013 12:41PM UTC

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:
Description

Take the demo from jqueryui.com 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

Attachments (0)
Change History (5)

Changed September 18, 2013 01:58AM UTC by tj.vantoll comment:1

owner: → 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: http://jsfiddle.net/tj_vantoll/YMnwU/

Thanks.

Changed September 18, 2013 06:56AM UTC by KirkSmith comment:2

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 jqueryui.com.

<!doctype html>

<html lang="en">

<head>

<meta charset="utf-8" />

<title>jQuery UI Draggable + Sortable</title>

<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />

<script src="http://code.jquery.com/jquery-1.9.1.js"></script>

<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></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();

});

</script>

</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>

</ul>

</body>

</html>

Changed September 18, 2013 12:13PM UTC by tj.vantoll comment:3

_comment0: 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="http://code.jquery.com/jquery-git.js"></script> \ <script src="http://code.jquery.com/ui/jquery-ui-git.js"></script> \ \ In jsFiddle you can always add "/show" to a URL to see the test case without the framing (e.g. http://jsfiddle.net/tj_vantoll/YMnwU/show/). \ \ Thanks.1379594457749154
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="http://code.jquery.com/jquery-git.js"></script>
<script src="http://code.jquery.com/ui/jquery-ui-git.js"></script>

In jsFiddle you can always add "/show" to a URL to see the test case without the framing (e.g. http://jsfiddle.net/tj_vantoll/YMnwU/show/).

Thanks.

Changed September 18, 2013 09:27PM UTC by KirkSmith comment:4

status: pendingnew

The problem is fixed in the pre release. Thanks

Changed September 19, 2013 12:41PM UTC by tj.vantoll comment:5

resolution: → duplicate
status: newclosed

Duplicate of #9315.