Ticket #3173 (open bug)

Opened 5 years ago

Last modified 7 months ago

Sortable: connected sortables do not scroll on transfer

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

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

comment:1 Changed 5 years ago by Cloudream

  • Milestone set to TDB

comment:2 Changed 4 years ago by scott.gonzalez

  • Milestone changed from TBD to 1.6

comment:3 Changed 4 years ago by rdworth

  • Milestone changed from 1.7 to 1.8

comment:4 Changed 3 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 2 years ago by jdmarshall

Also experiencing this issue.

comment:6 Changed 2 years ago by skhilko

Are there any workarounds while it's being fixed?

comment:7 Changed 7 months ago by scott.gonzalez

  • Milestone changed from 1.9.0 to 2.0.0

comment:8 Changed 7 months ago by petersendidit

  • Status changed from new to open
  • Summary changed from connected sortables do not scroll on transfer to Sortable: connected sortables do not scroll on transfer
Note: See TracTickets for help on using tickets.