Opened 15 years ago

Closed 6 years ago

Last modified 6 years ago

#3173 closed bug (fixed)

Sortable: connected sortables do not scroll on transfer

Reported by: anonymous Owned by: paul
Priority: minor Milestone: 1.12.2
Component: ui.sortable Version: 1.5.2
Keywords: sortable, connected, scrolling Cc:
Blocked by: Blocking:

Description

the setup:

  • two connected sortable lists
  • lists have fixed height and width and overflow auto
  • external helper element to work around scrolling within the lists on dragging

the bug:

if you move an item within the list it has been bevor the lists scroll correctly. but if you move an item to the other list it wont scroll the list while dragging it around

the code:

<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
		<title>Insert title here</title>		
		<style type="text/css">
			body { margin:0; padding:0; }
			ul { list-style-type:none; }
			ul.boxed { border:1px solid #000; margin:20px; padding:0; width:200px; height:200px; float:left; overflow:auto; }
			li { width:100%; max-width:200px; padding:5px 0; background-color:#ccc; margin:2px 0; }
			ul#list-3 { width:0;height:0;padding:0;margin:0; }
		</style>
		<script type="text/javascript" src="jquery.js"></script>
		<script type="text/javascript" src="jquery.ui.js" ></script>

	</head>
	<body>
		
		<ul id="list-3"></ul>
		
		<ul id="list-1" class="boxed">
			<li>A</li>
			<li>B</li>
			<li>C</li>

			<li>D</li>
			<li>E</li>
			<li>F</li>
			<li>G</li>
		</ul>
		
		<ul id="list-2" class="boxed">
			<li>H</li>

			<li>I</li>
			<li>J</li>
		</ul>
		
		<script type="text/javascript">			
			function test(event, element) {
				myHelper = $(element).clone();
				myHelper.show();
				$("#list-3").append(myHelper);
				return myHelper;
			}
		
			$("#list-1").sortable({
			    connectWith: ["#list-2"],
			    helper: test
			});
			
			$("#list-2").sortable({ 
			    connectWith: ["#list-1"],
			    helper: test
			});
		</script>
	</body>
</html>

Change History (10)

comment:1 Changed 15 years ago by Cloudream

Milestone: TDB

comment:2 Changed 14 years ago by Scott González

Milestone: TBD1.6

comment:3 Changed 14 years ago by rdworth

Milestone: 1.71.8

comment:4 Changed 13 years ago by swiftb3

I can verify that this bug also exists when dragging from a draggable connected to a sortable. Any update as to when this might be fixed, since 1.8 has been here for awhile?

comment:5 Changed 12 years ago by jdmarshall

Also experiencing this issue.

comment:6 Changed 12 years ago by skhilko

Are there any workarounds while it's being fixed?

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

Milestone: 1.9.02.0.0

comment:8 Changed 11 years ago by petersendidit

Status: newopen
Summary: connected sortables do not scroll on transferSortable: connected sortables do not scroll on transfer

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

Resolution: fixed
Status: openclosed

In c866e45:

Sortable: Fix various scrolling issues

  • Created _scroll extension point and migrated scroll code from _mouseDrag
  • Cleaned up logic for scrolled
  • Fixed appendTo functionality to match documentation
  • Remove unnecessary function calls
  • Move set-up position functions to appropriate place
  • Base scrollParent on placeholder and not helper
  • Update scrollParent when switching containers

Fixes #3173
Fixes #15165
Fixes #15166
Fixes #15167
Fixes #15168
Fixes #15169
Fixes #15170
Closes gh-1793

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

Milestone: 2.0.01.12.2
Note: See TracTickets for help on using tickets.