Skip to main content

Bug Tracker

Side navigation

#1680 closed bug (fixed)

Opened September 19, 2007 04:31PM UTC

Closed March 15, 2008 01:53PM UTC

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:
Blocked by: Blocking:
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 (2)
  • draggable_overflow_test.diff (0.8 KB) - added by zimbatm March 14, 2008 05:28PM UTC.

    Updated tests with overflow containerr

  • ui.sortable.js (8.5 KB) - added by sqrrrl September 19, 2007 07:58PM UTC.

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

Change History (8)

Changed September 19, 2007 07:59PM UTC by sqrrrl comment:1

Attached a fix... making helper fixed position and adjusting offsets a little seems to make it better. Attached version also has some performance tweaks.

Changed September 23, 2007 12:16PM UTC by paul comment:2

owner: → paul

Changed September 23, 2007 12:16PM UTC by paul comment:3

status: newassigned

Changed September 23, 2007 01:50PM UTC by paul comment:4

owner: paulsqrrrl
status: assignednew

Replying to [comment:1 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 March 14, 2008 04:06PM UTC by paul comment:5

owner: sqrrrlzimbatm

Changed March 14, 2008 05:33PM UTC by zimbatm comment:6

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.

Changed March 14, 2008 10:27PM UTC by zimbatm comment:7

Please close the ticket. My patch is probably irrelevant

Changed March 15, 2008 01:53PM UTC by scott.gonzal comment:8

resolution: → fixed
status: newclosed