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 comment:1
| owner: | → KirkSmith |
|---|---|
| status: | new → pending |
Changed September 18, 2013 06:56AM UTC by comment:2
| status: | pending → new |
|---|
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 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: | new → pending |
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 comment:4
| status: | pending → new |
|---|
The problem is fixed in the pre release. Thanks
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.