Ticket #1680 (closed bug: fixed)
Sortables in scroll render incorrectly when dragging
| Reported by: | sqrrrl | Owned by: | zimbatm |
|---|---|---|---|
| Priority: | major | Milestone: | 1.2.1 |
| Component: | ui | Version: | 1.2.1 |
| Keywords: | ui | Cc: | |
| Blocking: | Blocked by: |
Description
The drag helper position is incorrectly calculated when the container has overflow set to scroll. It is fine so long as the area has not been scrolled, but the further down you go, the further away from the cursor the helper is positioned. Example code:
<!DOCTYPE html PUBLIC "-W3CDTD HTML 4.01EN" " http://www.w3.org/TR/html4/strict.dtd">
<html> <head>
<script type="text/javascript" src="jquery-1.2.1.js"></script> <script type="text/javascript" src="metadata.js"></script> <script type="text/javascript" src="jqueryui/ui.mouse.js"></script> <script type="text/javascript" src="jqueryui/ui.draggable.js"></script> <script type="text/javascript" src="jqueryui/ui.draggableext.js"></script> <script type="text/javascript" src="jqueryui/ui.droppable.js"></script> <script type="text/javascript" src="jqueryui/ui.droppable.ext.js"></script> <script type="text/javascript" src="jqueryui/ui.sortable.js"></script> <script type="text/javascript">
$(document).ready( function() {
var container = $('div#container'); for( i = 0; i < 100; ++i ) {
$( '<div class="item">Item ' + i + '</div>' ).appendTo( container );
} container.sortable( { items: 'div.item' } );
});
</script> <style> div#container {
height: 100px; overflow-y: scroll;
} </style> <title></title> </head>
<body>
<p>Scroll Test</p>
<div id="container"/>
</body> </html>
Attachments
-
ui.sortable.js
(8.5 KB) -
added by sqrrrl 6 years ago.
- Modified sortable to fix rendering in scrollable containers, some perf improvements.
-
draggable_overflow_test.diff
(832 bytes) -
added by zimbatm 5 years ago.
- Updated tests with overflow containerr
Change History
Changed 6 years ago by sqrrrl
-
attachment
ui.sortable.js
added
comment:1 follow-up: ↓ 4 Changed 6 years ago by sqrrrl
Attached a fix... making helper fixed position and adjusting offsets a little seems to make it better. Attached version also has some performance tweaks.
comment:4 in reply to: ↑ 1 Changed 6 years ago by paul
- Owner changed from paul to sqrrrl
- Status changed from assigned to new
Replying to sqrrrl:
Attached a fix... making helper fixed position and adjusting offsets a little seems to make it better. Attached version also has some performance tweaks.
sqrrrl, this does not seem to work as expected. I've tried your version against the test (plugin/ui/test/sortable.html), the helper is positioned at the very bottom of the page, the mouse position is not relative to where you picked the element at and the floating example doesn't work correctly anymore.
It would still be great to see a working version of your performance improvements- keep me updated!
Changed 5 years ago by zimbatm
-
attachment
draggable_overflow_test.diff
added
Updated tests with overflow containerr
Please follow the bug reporting guidlines and use jsFiddle when providing test cases and demonstrations instead of pasting the code in the ticket.
Modified sortable to fix rendering in scrollable containers, some perf improvements.