Bug Tracker

Ticket #1680 (closed bug: fixed)

Opened 7 years ago

Last modified 6 years ago

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 Download (8.5 KB) - added by sqrrrl 7 years ago.
Modified sortable to fix rendering in scrollable containers, some perf improvements.
draggable_overflow_test.diff Download (832 bytes) - added by zimbatm 6 years ago.
Updated tests with overflow containerr

Change History

Changed 7 years ago by sqrrrl

Modified sortable to fix rendering in scrollable containers, some perf improvements.

comment:1 follow-up: ↓ 4 Changed 7 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:2 Changed 7 years ago by paul

  • Owner set to paul

comment:3 Changed 7 years ago by paul

  • Status changed from new to assigned

comment:4 in reply to: ↑ 1 Changed 7 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!

comment:5 Changed 6 years ago by paul

  • Owner changed from sqrrrl to zimbatm

Changed 6 years ago by zimbatm

Updated tests with overflow containerr

comment:6 Changed 6 years ago by zimbatm

This seems to be a fixed problem.

IMHO, it was related to broken position calculation, which comes from the core.

Before closing the ticket, I'd like to fix another problem where my new items gets smaller with when dragged.

comment:7 Changed 6 years ago by zimbatm

Please close the ticket. My patch is probably irrelevant

comment:8 Changed 6 years ago by scott.gonzal

  • Status changed from new to closed
  • Resolution set to fixed
Note: See TracTickets for help on using tickets.