![(please configure the [header_logo] section in trac.ini)](/chrome/site/nologo.gif)
Ticket #3173 (new bug)
connected sortables do not scroll on transfer
| Reported by: | anonymous | Owned by: | paul |
|---|---|---|---|
| Priority: | minor | Milestone: | 1.9 |
| Component: | ui.sortable | Version: | 1.5.2 |
| Keywords: | sortable, connected, scrolling | Cc: |
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
Note: See
TracTickets for help on using
tickets.
