Opened 11 years ago

Closed 7 years ago

Last modified 7 years ago

#4231 closed bug (worksforme)

Sortable: not working if scrollbar on page (and scrolled down (once?))

Reported by: studlyswissdude2 Owned by: Jörn Zaefferer
Priority: major Milestone: 2.0.0
Component: ui.sortable Version: 1.5.2
Keywords: Cc:
Blocked by: Blocking:

Description

I have a couple of <ul>s on a page, all of them contain sortable <li>s. The sortables functionality works fine in FF, however, I am running into a problem in IE7 when the page gets big enough that scrolling appears (I have overflow-y set to auto). The sortables doesn't seem to be working and instead when trying to drag an item, all the <li>s on the page start flickering (disappearing and appearing again) and the dragging functionality is not working at all. It seems to be working if I scroll to the bottom of the page and try to sort items then!

Any idea what the problem could be?

Change History (18)

comment:1 Changed 11 years ago by Jörn Zaefferer

Milestone: TBD1.6

comment:2 Changed 11 years ago by rdworth

Milestone: 1.61.8

comment:3 Changed 10 years ago by paul

This needa a reduced test case - would you be able to provide a test page for us?

comment:4 Changed 10 years ago by superboer12

I am also experiencing major problems with sortables in a scrolling container.

I made two simple test pages. The first test with only draggables and droppable area's: http://pub.romaww.com/jq/testDrop.html You can drop the draggables to every droppable, thus working fine.

The second test also uses sortable for the droppable area's. http://pub.romaww.com/jq/testDropSort.html Now you can only drop a draggable into the sortable drop area's which are visible at the time the handlers are added. If you scroll down first before adding the handlers it gives the same scenario for the area's which are then visible.

The problem not only occurs when using IE7 but also in other browsers (FF3.5, FF3.0, IE8). Using jQuery 1.3.2 and jQuery ui 1.7.2

Adding handlers using this code:

$(".dropArea").droppable({
	drop: function(ev, ui) { $(ui.draggable).html("dropped"); }
});
$(".dropArea").sortable();
$(".dragArea").draggable({
	connectToSortable: '.dropArea',
	revert: 'invalid',
	helper: 'clone'
});

comment:5 Changed 10 years ago by Jörn Zaefferer

Owner: set to joern.zaefferer
Status: newaccepted

comment:6 Changed 10 years ago by Jörn Zaefferer

Testcase with 1.8rc2 (thanks Adam): http://jsbin.com/uloya3/8

comment:7 Changed 10 years ago by Jörn Zaefferer

Summary: Sortables - IE7 not working if scrollbar on pageSortables - not working if scrollbar on page (and scrolled down (once?))

Reproducable in FF3.6 (not IE specific):

http://jsbin.com/uloya3/12

Scroll down half way, then try to drag one item to the left, twice. The first time, nothing happens. The second time, it'll change the dragged item's text to 'dragged', without actually adding something to the sortable.

comment:8 Changed 10 years ago by Jörn Zaefferer

Commited visual testcase in r3849.

comment:9 Changed 10 years ago by Jörn Zaefferer

Milestone: 1.81.next

I can't find any code in draggables or droppables that may be resonposible for handling the scroll offset. Deferring to later release.

comment:10 Changed 9 years ago by Scott González

Priority: criticalmajor

comment:11 Changed 8 years ago by travisp

Any updates or workarounds on this? Experiencing this problem in 1.8 and it makes ui-sortable useless for longer lists.

comment:12 Changed 7 years ago by Scott González

Milestone: 1.next2.0.0
Status: acceptednew

comment:13 Changed 7 years ago by mikesherov

Status: newopen
Summary: Sortables - not working if scrollbar on page (and scrolled down (once?))Sortable: not working if scrollbar on page (and scrolled down (once?))

comment:14 Changed 7 years ago by mikesherov

Resolution: worksforme
Status: openclosed

Thanks for taking the time to contribute to the jQuery UI project! I can no longer reproduce the issue using the latest jQuery and jQuery UI. http://jsfiddle.net/jxkBn/

If you can still reproduce it, please feel free to reply to this ticket with a test case showing the problem. Thanks!

comment:15 Changed 7 years ago by halm

I am having the same problem. I created a test instance on jsfiddle: http://jsfiddle.net/halm/Fr7hN/1/ It is possible to move items from the 1st list to the 2nd list, unless you scroll down to the bottom of the 2nd list.

In the jsfiddle example above (http://jsfiddle.net/jxkBn), I can break the example if I remove the line "helper: 'clone'" - after that it is possible to *move* the draggables to the top of the droppable list, but not to the bottom of the droppable list. Which sounds like the same problem I am having.

Last edited 7 years ago by halm (previous) (diff)

comment:16 Changed 7 years ago by halm

I think I have nailed down where the bug was introduced - in jquery-ui 1.8.12, the following was added to sortable function _refreshPositions:

//We ignore calculating positions of all connected containers when we're not over them
if(item.instance != this.currentContainer && this.currentContainer && item.item[0] != this.currentItem[0])
	continue;

If I put this code into 1.8.11 then it stops working.

I must apologise but I do not have time to work out how to fix this bug as I am already way over budget on this task... but I hope this gives you a headstart.

comment:17 Changed 7 years ago by tj.vantoll

@halm Your test case indicates that this is likely a duplicate of #7065.

comment:18 in reply to:  17 Changed 7 years ago by halm

Replying to tj.vantoll:

@halm Your test case indicates that this is likely a duplicate of #7065.

Agreed, thanks.

Note: See TracTickets for help on using tickets.