Skip to main content

Bug Tracker

Side navigation

#1126 closed bug (wontfix)

Opened April 16, 2007 03:49AM UTC

Closed March 31, 2008 01:36AM UTC

sortable scroll bug

Reported by: hiphapis Owned by: stefan
Priority: major Milestone: 1.1.3
Component: interface Version: 1.1.2
Keywords: Cc:
Blocked by: Blocking:
Description
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; utf-8" />
<title>Sortables demo - Interface plugin for jQuery</title>
		<script type="text/javascript" src="http://interface.eyecon.ro//jquery/jquery.js"></script>
		<script type="text/javascript" src="http://interface.eyecon.ro//interface/interface.js"></script>
<style type="text/css" media="all">
html
{
	height: 100%;
}
img{
	border: none;
}
body
{
	background: #fff;
	height: 100%;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 11px;
}
.groupWrapper
{
	width: 32%;
	float: left;
	margin-right: 1%;
	min-height: 400px;
}
.serializer
{
	clear: both;
}
.groupItem
{
	margin-bottom: 20px;
}
.groupItem .itemHeader
{
	line-height: 28px;
	background-color: #DAFF9F;
	border-top: 2px solid #B5EF59;
	color: #000;
	padding: 0 10px;
	cursor: move;
	font-weight: bold;
	font-size: 16px;
	height: 28px;
	position: relative;
}

.groupItem .itemHeader a
{
	position: absolute;
	right: 10px;
	top: 0px;
	font-weight: normal;
	font-size: 11px;
	text-decoration: none;
}
.sortHelper
{
	border: 3px dashed #666;
	width: auto !important;
}
.groupWrapper p
{
	height: 1px;
	overflow: hidden;
	margin: 0;
	padding: 0;
}
</style>
</head>
<body>
<div id="sort1" class="groupWrapper">
	<div id="newsFeeder" class="groupItem">

		<div class="itemHeader">Feeds<a href="#" class="closeEl">[-]</a></div>
		<div class="itemContent">
			<ul>
				<li>orem ipsum dolor sit amet, consectetuer adipiscing elit</li>
				<li>orem ipsum dolor sit amet, consectetuer adipiscing elit</li>
				<li>orem ipsum dolor sit amet, consectetuer adipiscing elit</li>

				<li>orem ipsum dolor sit amet, consectetuer adipiscing elit</li>
			</ul>
		</div>
	</div>
	<div id="news" class="groupItem">
		<div class="itemHeader">News<a href="#" class="closeEl">[-]</a></div>
		<div class="itemContent">

			<ul>
				<li>orem ipsum dolor sit amet, consectetuer adipiscing elit</li>
				<li>orem ipsum dolor sit amet, consectetuer adipiscing elit</li>
				<li>orem ipsum dolor sit amet, consectetuer adipiscing elit</li>
				<li>orem ipsum dolor sit amet, consectetuer adipiscing elit</li>
			</ul>
		</div>

	</div>
	<p> </p>
</div>
<div id="sort2" class="groupWrapper">
	<div id="shop" class="groupItem">
		<div class="itemHeader">Shopping<a href="#" class="closeEl">[-]</a></div>
		<div class="itemContent">
			<ul>
				<li>orem ipsum dolor sit amet, consectetuer adipiscing elit</li>

				<li>orem ipsum dolor sit amet, consectetuer adipiscing elit</li>
				<li>orem ipsum dolor sit amet, consectetuer adipiscing elit</li>
				<li>orem ipsum dolor sit amet, consectetuer adipiscing elit</li>
			</ul>
		</div>
	</div>
	<p> </p>

</div>
<div id="sort3" class="groupWrapper">
	<div id="links" class="groupItem">
		<div class="itemHeader">Links<a href="#" class="closeEl">[-]</a></div>
		<div class="itemContent">
			<ul>
				<li>orem ipsum dolor sit amet, consectetuer adipiscing elit</li>
				<li>orem ipsum dolor sit amet, consectetuer adipiscing elit</li>

				<li>orem ipsum dolor sit amet, consectetuer adipiscing elit</li>
				<li>orem ipsum dolor sit amet, consectetuer adipiscing elit</li>
			</ul>
		</div>
	</div>
	<div id="images" class="groupItem">
		<div class="itemHeader">Images0<a href="#" class="closeEl">[-]</a></div>
		<div class="itemContent">
			<ul>
				<li>orem ipsum dolor sit amet, consectetuer adipiscing elit</li>
				<li>orem ipsum dolor sit amet, consectetuer adipiscing elit</li>
				<li>orem ipsum dolor sit amet, consectetuer adipiscing elit</li>
				<li>orem ipsum dolor sit amet, consectetuer adipiscing elit</li>
			</ul>
		</div>
	</div>
	<div id="images" class="groupItem">
		<div class="itemHeader">Images1<a href="#" class="closeEl">[-]</a></div>
		<div class="itemContent">
			<ul>
				<li>orem ipsum dolor sit amet, consectetuer adipiscing elit</li>
				<li>orem ipsum dolor sit amet, consectetuer adipiscing elit</li>
				<li>orem ipsum dolor sit amet, consectetuer adipiscing elit</li>
				<li>orem ipsum dolor sit amet, consectetuer adipiscing elit</li>
			</ul>
		</div>
	</div>
	<div id="images" class="groupItem">
		<div class="itemHeader">Images2<a href="#" class="closeEl">[-]</a></div>
		<div class="itemContent">
			<ul>
				<li>orem ipsum dolor sit amet, consectetuer adipiscing elit</li>
				<li>orem ipsum dolor sit amet, consectetuer adipiscing elit</li>
				<li>orem ipsum dolor sit amet, consectetuer adipiscing elit</li>
				<li>orem ipsum dolor sit amet, consectetuer adipiscing elit</li>
			</ul>
		</div>
	</div>
	<div id="images" class="groupItem">
		<div class="itemHeader">Images3<a href="#" class="closeEl">[-]</a></div>
		<div class="itemContent">
			<ul>
				<li>orem ipsum dolor sit amet, consectetuer adipiscing elit</li>
				<li>orem ipsum dolor sit amet, consectetuer adipiscing elit</li>
				<li>orem ipsum dolor sit amet, consectetuer adipiscing elit</li>
				<li>orem ipsum dolor sit amet, consectetuer adipiscing elit</li>
			</ul>
		</div>
	</div>
	<div id="images" class="groupItem">
		<div class="itemHeader">Images4<a href="#" class="closeEl">[-]</a></div>
		<div class="itemContent">
			<ul>
				<li>orem ipsum dolor sit amet, consectetuer adipiscing elit</li>
				<li>orem ipsum dolor sit amet, consectetuer adipiscing elit</li>
				<li>orem ipsum dolor sit amet, consectetuer adipiscing elit</li>
				<li>orem ipsum dolor sit amet, consectetuer adipiscing elit</li>
			</ul>
		</div>
	</div>
	<div id="images" class="groupItem">
		<div class="itemHeader">Images5<a href="#" class="closeEl">[-]</a></div>
		<div class="itemContent">
			<ul>
				<li>orem ipsum dolor sit amet, consectetuer adipiscing elit</li>
				<li>orem ipsum dolor sit amet, consectetuer adipiscing elit</li>
				<li>orem ipsum dolor sit amet, consectetuer adipiscing elit</li>
				<li>orem ipsum dolor sit amet, consectetuer adipiscing elit</li>
			</ul>
		</div>
	</div>
	<div id="images" class="groupItem">
		<div class="itemHeader">Images6<a href="#" class="closeEl">[-]</a></div>
		<div class="itemContent">
			<ul>
				<li>orem ipsum dolor sit amet, consectetuer adipiscing elit</li>
				<li>orem ipsum dolor sit amet, consectetuer adipiscing elit</li>
				<li>orem ipsum dolor sit amet, consectetuer adipiscing elit</li>
				<li>orem ipsum dolor sit amet, consectetuer adipiscing elit</li>
			</ul>
		</div>
	</div>
	<div id="images" class="groupItem">
		<div class="itemHeader">Images7<a href="#" class="closeEl">[-]</a></div>
		<div class="itemContent">
			<ul>
				<li>orem ipsum dolor sit amet, consectetuer adipiscing elit</li>
				<li>orem ipsum dolor sit amet, consectetuer adipiscing elit</li>
				<li>orem ipsum dolor sit amet, consectetuer adipiscing elit</li>
				<li>orem ipsum dolor sit amet, consectetuer adipiscing elit</li>
			</ul>
		</div>
	</div>
	<div id="images" class="groupItem">
		<div class="itemHeader">Images8<a href="#" class="closeEl">[-]</a></div>
		<div class="itemContent">
			<ul>
				<li>orem ipsum dolor sit amet, consectetuer adipiscing elit</li>
				<li>orem ipsum dolor sit amet, consectetuer adipiscing elit</li>
				<li>orem ipsum dolor sit amet, consectetuer adipiscing elit</li>
				<li>orem ipsum dolor sit amet, consectetuer adipiscing elit</li>
			</ul>
		</div>
	</div>
	<p> </p>
</div>
<script type="text/javascript">
$(document).ready(
	function () {
		$('a.closeEl').bind('click', toggleContent);
		$('div.groupWrapper').Sortable(
			{
				accept: 'groupItem',
				helperclass: 'sortHelper',
				activeclass : 	'sortableactive',
				hoverclass : 	'sortablehover',
				handle: 'div.itemHeader',
				tolerance: 'pointer',
				onChange : function(ser)
				{
				},
				onStart : function()
				{
					$.iAutoscroller.start(this, document.getElementsByTagName('body'));
				},
				onStop : function()
				{
					$.iAutoscroller.stop();
				}
			}
		);
	}
);
var toggleContent = function(e)
{
	var targetContent = $('div.itemContent', this.parentNode.parentNode);
	if (targetContent.css('display') == 'none') {
		targetContent.slideDown(300);
		$(this).html('[-]');
	} else {
		targetContent.slideUp(300);
		$(this).html('[+]');
	}
	return false;
};
function serialize(s)
{
	serial = $.SortSerialize(s);
	alert(serial.hash);
};
</script>
<div  class="serializer">
<a href="#" onClick="serialize(); return false;" >serialize all lists</a>
<a href="#" onClick="serialize('sort1'); return false;" >serialize list 1</a>
<a href="#" onClick="serialize('sort2'); return false;" >serialize list 2</a>
<a href="#" onClick="serialize('sort3'); return false;" >serialize list 3</a>

<a href="#" onClick="serialize(['sort1', 'sort3']); return false;" >serialize lists 2 and 3</a>
</div>
		<script language="JavaScript" type="text/javascript">var client_id = 1;</script>
		<script language="JavaScript" src="http://stats.byspirit.ro/track.js" type="text/javascript"></script>
		<noscript>
		<p><img alt="" src="http://stats.byspirit.ro/image.php?client_id=1" width="1" height="1" /></p>
		</noscript>
</body>
</html>

1) put items to drag vertically

2) Scroll to the bottom of the page

3) Click the item to drag

4) Scroll Shake cause a confusion

Attachments (0)
Change History (4)

Changed April 16, 2007 06:26AM UTC by hiphapis comment:1

solution..(??)

onStart : function(){
	$('body').append("<div id='autoHeight' style='height:20px'></div>");
}

onStop : function(){
	$('#autoHeight').remove();
}

Changed April 16, 2007 07:38AM UTC by hiphapis comment:2

style='height:20px'

->

height is drag item Height

Changed April 16, 2007 02:43PM UTC by brandon comment:3

component: dimensionsinterface
owner: paulstefan

Changed March 31, 2008 01:36AM UTC by scott.gonzal comment:4

description: {{{\ <html>\ <head>\ <meta http-equiv="Content-Type" content="text/html; utf-8" />\ <title>Sortables demo - Interface plugin for jQuery</title>\ <script type="text/javascript" src="http://interface.eyecon.ro//jquery/jquery.js"></script>\ <script type="text/javascript" src="http://interface.eyecon.ro//interface/interface.js"></script>\ <style type="text/css" media="all">\ html\ {\ height: 100%;\ }\ img{\ border: none;\ }\ body\ {\ background: #fff;\ height: 100%;\ font-family: Arial, Helvetica, sans-serif;\ font-size: 11px;\ }\ .groupWrapper\ {\ width: 32%;\ float: left;\ margin-right: 1%;\ min-height: 400px;\ }\ .serializer\ {\ clear: both;\ }\ .groupItem\ {\ margin-bottom: 20px;\ }\ .groupItem .itemHeader\ {\ line-height: 28px;\ background-color: #DAFF9F;\ border-top: 2px solid #B5EF59;\ color: #000;\ padding: 0 10px;\ cursor: move;\ font-weight: bold;\ font-size: 16px;\ height: 28px;\ position: relative;\ }\ \ .groupItem .itemHeader a\ {\ position: absolute;\ right: 10px;\ top: 0px;\ font-weight: normal;\ font-size: 11px;\ text-decoration: none;\ }\ .sortHelper\ {\ border: 3px dashed #666;\ width: auto !important;\ }\ .groupWrapper p\ {\ height: 1px;\ overflow: hidden;\ margin: 0;\ padding: 0;\ }\ </style>\ </head>\ <body>\ <div id="sort1" class="groupWrapper">\ <div id="newsFeeder" class="groupItem">\ \ <div class="itemHeader">Feeds<a href="#" class="closeEl">[-]</a></div>\ <div class="itemContent">\ <ul>\ <li>orem ipsum dolor sit amet, consectetuer adipiscing elit</li>\ <li>orem ipsum dolor sit amet, consectetuer adipiscing elit</li>\ <li>orem ipsum dolor sit amet, consectetuer adipiscing elit</li>\ \ <li>orem ipsum dolor sit amet, consectetuer adipiscing elit</li>\ </ul>\ </div>\ </div>\ <div id="news" class="groupItem">\ <div class="itemHeader">News<a href="#" class="closeEl">[-]</a></div>\ <div class="itemContent">\ \ <ul>\ <li>orem ipsum dolor sit amet, consectetuer adipiscing elit</li>\ <li>orem ipsum dolor sit amet, consectetuer adipiscing elit</li>\ <li>orem ipsum dolor sit amet, consectetuer adipiscing elit</li>\ <li>orem ipsum dolor sit amet, consectetuer adipiscing elit</li>\ </ul>\ </div>\ \ </div>\ <p>&nbsp;</p>\ </div>\ <div id="sort2" class="groupWrapper">\ <div id="shop" class="groupItem">\ <div class="itemHeader">Shopping<a href="#" class="closeEl">[-]</a></div>\ <div class="itemContent">\ <ul>\ <li>orem ipsum dolor sit amet, consectetuer adipiscing elit</li>\ \ <li>orem ipsum dolor sit amet, consectetuer adipiscing elit</li>\ <li>orem ipsum dolor sit amet, consectetuer adipiscing elit</li>\ <li>orem ipsum dolor sit amet, consectetuer adipiscing elit</li>\ </ul>\ </div>\ </div>\ <p>&nbsp;</p>\ \ </div>\ <div id="sort3" class="groupWrapper">\ <div id="links" class="groupItem">\ <div class="itemHeader">Links<a href="#" class="closeEl">[-]</a></div>\ <div class="itemContent">\ <ul>\ <li>orem ipsum dolor sit amet, consectetuer adipiscing elit</li>\ <li>orem ipsum dolor sit amet, consectetuer adipiscing elit</li>\ \ <li>orem ipsum dolor sit amet, consectetuer adipiscing elit</li>\ <li>orem ipsum dolor sit amet, consectetuer adipiscing elit</li>\ </ul>\ </div>\ </div>\ <div id="images" class="groupItem">\ <div class="itemHeader">Images0<a href="#" class="closeEl">[-]</a></div>\ <div class="itemContent">\ <ul>\ <li>orem ipsum dolor sit amet, consectetuer adipiscing elit</li>\ <li>orem ipsum dolor sit amet, consectetuer adipiscing elit</li>\ <li>orem ipsum dolor sit amet, consectetuer adipiscing elit</li>\ <li>orem ipsum dolor sit amet, consectetuer adipiscing elit</li>\ </ul>\ </div>\ </div>\ <div id="images" class="groupItem">\ <div class="itemHeader">Images1<a href="#" class="closeEl">[-]</a></div>\ <div class="itemContent">\ <ul>\ <li>orem ipsum dolor sit amet, consectetuer adipiscing elit</li>\ <li>orem ipsum dolor sit amet, consectetuer adipiscing elit</li>\ <li>orem ipsum dolor sit amet, consectetuer adipiscing elit</li>\ <li>orem ipsum dolor sit amet, consectetuer adipiscing elit</li>\ </ul>\ </div>\ </div>\ <div id="images" class="groupItem">\ <div class="itemHeader">Images2<a href="#" class="closeEl">[-]</a></div>\ <div class="itemContent">\ <ul>\ <li>orem ipsum dolor sit amet, consectetuer adipiscing elit</li>\ <li>orem ipsum dolor sit amet, consectetuer adipiscing elit</li>\ <li>orem ipsum dolor sit amet, consectetuer adipiscing elit</li>\ <li>orem ipsum dolor sit amet, consectetuer adipiscing elit</li>\ </ul>\ </div>\ </div>\ <div id="images" class="groupItem">\ <div class="itemHeader">Images3<a href="#" class="closeEl">[-]</a></div>\ <div class="itemContent">\ <ul>\ <li>orem ipsum dolor sit amet, consectetuer adipiscing elit</li>\ <li>orem ipsum dolor sit amet, consectetuer adipiscing elit</li>\ <li>orem ipsum dolor sit amet, consectetuer adipiscing elit</li>\ <li>orem ipsum dolor sit amet, consectetuer adipiscing elit</li>\ </ul>\ </div>\ </div>\ <div id="images" class="groupItem">\ <div class="itemHeader">Images4<a href="#" class="closeEl">[-]</a></div>\ <div class="itemContent">\ <ul>\ <li>orem ipsum dolor sit amet, consectetuer adipiscing elit</li>\ <li>orem ipsum dolor sit amet, consectetuer adipiscing elit</li>\ <li>orem ipsum dolor sit amet, consectetuer adipiscing elit</li>\ <li>orem ipsum dolor sit amet, consectetuer adipiscing elit</li>\ </ul>\ </div>\ </div>\ <div id="images" class="groupItem">\ <div class="itemHeader">Images5<a href="#" class="closeEl">[-]</a></div>\ <div class="itemContent">\ <ul>\ <li>orem ipsum dolor sit amet, consectetuer adipiscing elit</li>\ <li>orem ipsum dolor sit amet, consectetuer adipiscing elit</li>\ <li>orem ipsum dolor sit amet, consectetuer adipiscing elit</li>\ <li>orem ipsum dolor sit amet, consectetuer adipiscing elit</li>\ </ul>\ </div>\ </div>\ <div id="images" class="groupItem">\ <div class="itemHeader">Images6<a href="#" class="closeEl">[-]</a></div>\ <div class="itemContent">\ <ul>\ <li>orem ipsum dolor sit amet, consectetuer adipiscing elit</li>\ <li>orem ipsum dolor sit amet, consectetuer adipiscing elit</li>\ <li>orem ipsum dolor sit amet, consectetuer adipiscing elit</li>\ <li>orem ipsum dolor sit amet, consectetuer adipiscing elit</li>\ </ul>\ </div>\ </div>\ <div id="images" class="groupItem">\ <div class="itemHeader">Images7<a href="#" class="closeEl">[-]</a></div>\ <div class="itemContent">\ <ul>\ <li>orem ipsum dolor sit amet, consectetuer adipiscing elit</li>\ <li>orem ipsum dolor sit amet, consectetuer adipiscing elit</li>\ <li>orem ipsum dolor sit amet, consectetuer adipiscing elit</li>\ <li>orem ipsum dolor sit amet, consectetuer adipiscing elit</li>\ </ul>\ </div>\ </div>\ <div id="images" class="groupItem">\ <div class="itemHeader">Images8<a href="#" class="closeEl">[-]</a></div>\ <div class="itemContent">\ <ul>\ <li>orem ipsum dolor sit amet, consectetuer adipiscing elit</li>\ <li>orem ipsum dolor sit amet, consectetuer adipiscing elit</li>\ <li>orem ipsum dolor sit amet, consectetuer adipiscing elit</li>\ <li>orem ipsum dolor sit amet, consectetuer adipiscing elit</li>\ </ul>\ </div>\ </div>\ <p>&nbsp;</p>\ </div>\ <script type="text/javascript">\ $(document).ready(\ function () {\ $('a.closeEl').bind('click', toggleContent);\ $('div.groupWrapper').Sortable(\ {\ accept: 'groupItem',\ helperclass: 'sortHelper',\ activeclass : 'sortableactive',\ hoverclass : 'sortablehover',\ handle: 'div.itemHeader',\ tolerance: 'pointer',\ onChange : function(ser)\ {\ },\ onStart : function()\ {\ $.iAutoscroller.start(this, document.getElementsByTagName('body'));\ },\ onStop : function()\ {\ $.iAutoscroller.stop();\ }\ }\ );\ }\ );\ var toggleContent = function(e)\ {\ var targetContent = $('div.itemContent', this.parentNode.parentNode);\ if (targetContent.css('display') == 'none') {\ targetContent.slideDown(300);\ $(this).html('[-]');\ } else {\ targetContent.slideUp(300);\ $(this).html('[+]');\ }\ return false;\ };\ function serialize(s)\ {\ serial = $.SortSerialize(s);\ alert(serial.hash);\ };\ </script>\ <div class="serializer">\ <a href="#" onClick="serialize(); return false;" >serialize all lists</a>\ <a href="#" onClick="serialize('sort1'); return false;" >serialize list 1</a>\ <a href="#" onClick="serialize('sort2'); return false;" >serialize list 2</a>\ <a href="#" onClick="serialize('sort3'); return false;" >serialize list 3</a>\ \ <a href="#" onClick="serialize(['sort1', 'sort3']); return false;" >serialize lists 2 and 3</a>\ </div>\ <script language="JavaScript" type="text/javascript">var client_id = 1;</script>\ <script language="JavaScript" src="http://stats.byspirit.ro/track.js" type="text/javascript"></script>\ <noscript>\ <p><img alt="" src="http://stats.byspirit.ro/image.php?client_id=1" width="1" height="1" /></p>\ </noscript>\ </body>\ </html>\ }}}\ \ 1) put items to drag vertically\ 2) Scroll to the bottom of the page\ 3) Click the item to drag\ 4) Scroll Shake cause a confusion{{{ \ <html> \ <head> \ <meta http-equiv="Content-Type" content="text/html; utf-8" /> \ <title>Sortables demo - Interface plugin for jQuery</title> \ <script type="text/javascript" src="http://interface.eyecon.ro//jquery/jquery.js"></script> \ <script type="text/javascript" src="http://interface.eyecon.ro//interface/interface.js"></script> \ <style type="text/css" media="all"> \ html \ { \ height: 100%; \ } \ img{ \ border: none; \ } \ body \ { \ background: #fff; \ height: 100%; \ font-family: Arial, Helvetica, sans-serif; \ font-size: 11px; \ } \ .groupWrapper \ { \ width: 32%; \ float: left; \ margin-right: 1%; \ min-height: 400px; \ } \ .serializer \ { \ clear: both; \ } \ .groupItem \ { \ margin-bottom: 20px; \ } \ .groupItem .itemHeader \ { \ line-height: 28px; \ background-color: #DAFF9F; \ border-top: 2px solid #B5EF59; \ color: #000; \ padding: 0 10px; \ cursor: move; \ font-weight: bold; \ font-size: 16px; \ height: 28px; \ position: relative; \ } \ \ .groupItem .itemHeader a \ { \ position: absolute; \ right: 10px; \ top: 0px; \ font-weight: normal; \ font-size: 11px; \ text-decoration: none; \ } \ .sortHelper \ { \ border: 3px dashed #666; \ width: auto !important; \ } \ .groupWrapper p \ { \ height: 1px; \ overflow: hidden; \ margin: 0; \ padding: 0; \ } \ </style> \ </head> \ <body> \ <div id="sort1" class="groupWrapper"> \ <div id="newsFeeder" class="groupItem"> \ \ <div class="itemHeader">Feeds<a href="#" class="closeEl">[-]</a></div> \ <div class="itemContent"> \ <ul> \ <li>orem ipsum dolor sit amet, consectetuer adipiscing elit</li> \ <li>orem ipsum dolor sit amet, consectetuer adipiscing elit</li> \ <li>orem ipsum dolor sit amet, consectetuer adipiscing elit</li> \ \ <li>orem ipsum dolor sit amet, consectetuer adipiscing elit</li> \ </ul> \ </div> \ </div> \ <div id="news" class="groupItem"> \ <div class="itemHeader">News<a href="#" class="closeEl">[-]</a></div> \ <div class="itemContent"> \ \ <ul> \ <li>orem ipsum dolor sit amet, consectetuer adipiscing elit</li> \ <li>orem ipsum dolor sit amet, consectetuer adipiscing elit</li> \ <li>orem ipsum dolor sit amet, consectetuer adipiscing elit</li> \ <li>orem ipsum dolor sit amet, consectetuer adipiscing elit</li> \ </ul> \ </div> \ \ </div> \ <p>&nbsp;</p> \ </div> \ <div id="sort2" class="groupWrapper"> \ <div id="shop" class="groupItem"> \ <div class="itemHeader">Shopping<a href="#" class="closeEl">[-]</a></div> \ <div class="itemContent"> \ <ul> \ <li>orem ipsum dolor sit amet, consectetuer adipiscing elit</li> \ \ <li>orem ipsum dolor sit amet, consectetuer adipiscing elit</li> \ <li>orem ipsum dolor sit amet, consectetuer adipiscing elit</li> \ <li>orem ipsum dolor sit amet, consectetuer adipiscing elit</li> \ </ul> \ </div> \ </div> \ <p>&nbsp;</p> \ \ </div> \ <div id="sort3" class="groupWrapper"> \ <div id="links" class="groupItem"> \ <div class="itemHeader">Links<a href="#" class="closeEl">[-]</a></div> \ <div class="itemContent"> \ <ul> \ <li>orem ipsum dolor sit amet, consectetuer adipiscing elit</li> \ <li>orem ipsum dolor sit amet, consectetuer adipiscing elit</li> \ \ <li>orem ipsum dolor sit amet, consectetuer adipiscing elit</li> \ <li>orem ipsum dolor sit amet, consectetuer adipiscing elit</li> \ </ul> \ </div> \ </div> \ <div id="images" class="groupItem"> \ <div class="itemHeader">Images0<a href="#" class="closeEl">[-]</a></div> \ <div class="itemContent"> \ <ul> \ <li>orem ipsum dolor sit amet, consectetuer adipiscing elit</li> \ <li>orem ipsum dolor sit amet, consectetuer adipiscing elit</li> \ <li>orem ipsum dolor sit amet, consectetuer adipiscing elit</li> \ <li>orem ipsum dolor sit amet, consectetuer adipiscing elit</li> \ </ul> \ </div> \ </div> \ <div id="images" class="groupItem"> \ <div class="itemHeader">Images1<a href="#" class="closeEl">[-]</a></div> \ <div class="itemContent"> \ <ul> \ <li>orem ipsum dolor sit amet, consectetuer adipiscing elit</li> \ <li>orem ipsum dolor sit amet, consectetuer adipiscing elit</li> \ <li>orem ipsum dolor sit amet, consectetuer adipiscing elit</li> \ <li>orem ipsum dolor sit amet, consectetuer adipiscing elit</li> \ </ul> \ </div> \ </div> \ <div id="images" class="groupItem"> \ <div class="itemHeader">Images2<a href="#" class="closeEl">[-]</a></div> \ <div class="itemContent"> \ <ul> \ <li>orem ipsum dolor sit amet, consectetuer adipiscing elit</li> \ <li>orem ipsum dolor sit amet, consectetuer adipiscing elit</li> \ <li>orem ipsum dolor sit amet, consectetuer adipiscing elit</li> \ <li>orem ipsum dolor sit amet, consectetuer adipiscing elit</li> \ </ul> \ </div> \ </div> \ <div id="images" class="groupItem"> \ <div class="itemHeader">Images3<a href="#" class="closeEl">[-]</a></div> \ <div class="itemContent"> \ <ul> \ <li>orem ipsum dolor sit amet, consectetuer adipiscing elit</li> \ <li>orem ipsum dolor sit amet, consectetuer adipiscing elit</li> \ <li>orem ipsum dolor sit amet, consectetuer adipiscing elit</li> \ <li>orem ipsum dolor sit amet, consectetuer adipiscing elit</li> \ </ul> \ </div> \ </div> \ <div id="images" class="groupItem"> \ <div class="itemHeader">Images4<a href="#" class="closeEl">[-]</a></div> \ <div class="itemContent"> \ <ul> \ <li>orem ipsum dolor sit amet, consectetuer adipiscing elit</li> \ <li>orem ipsum dolor sit amet, consectetuer adipiscing elit</li> \ <li>orem ipsum dolor sit amet, consectetuer adipiscing elit</li> \ <li>orem ipsum dolor sit amet, consectetuer adipiscing elit</li> \ </ul> \ </div> \ </div> \ <div id="images" class="groupItem"> \ <div class="itemHeader">Images5<a href="#" class="closeEl">[-]</a></div> \ <div class="itemContent"> \ <ul> \ <li>orem ipsum dolor sit amet, consectetuer adipiscing elit</li> \ <li>orem ipsum dolor sit amet, consectetuer adipiscing elit</li> \ <li>orem ipsum dolor sit amet, consectetuer adipiscing elit</li> \ <li>orem ipsum dolor sit amet, consectetuer adipiscing elit</li> \ </ul> \ </div> \ </div> \ <div id="images" class="groupItem"> \ <div class="itemHeader">Images6<a href="#" class="closeEl">[-]</a></div> \ <div class="itemContent"> \ <ul> \ <li>orem ipsum dolor sit amet, consectetuer adipiscing elit</li> \ <li>orem ipsum dolor sit amet, consectetuer adipiscing elit</li> \ <li>orem ipsum dolor sit amet, consectetuer adipiscing elit</li> \ <li>orem ipsum dolor sit amet, consectetuer adipiscing elit</li> \ </ul> \ </div> \ </div> \ <div id="images" class="groupItem"> \ <div class="itemHeader">Images7<a href="#" class="closeEl">[-]</a></div> \ <div class="itemContent"> \ <ul> \ <li>orem ipsum dolor sit amet, consectetuer adipiscing elit</li> \ <li>orem ipsum dolor sit amet, consectetuer adipiscing elit</li> \ <li>orem ipsum dolor sit amet, consectetuer adipiscing elit</li> \ <li>orem ipsum dolor sit amet, consectetuer adipiscing elit</li> \ </ul> \ </div> \ </div> \ <div id="images" class="groupItem"> \ <div class="itemHeader">Images8<a href="#" class="closeEl">[-]</a></div> \ <div class="itemContent"> \ <ul> \ <li>orem ipsum dolor sit amet, consectetuer adipiscing elit</li> \ <li>orem ipsum dolor sit amet, consectetuer adipiscing elit</li> \ <li>orem ipsum dolor sit amet, consectetuer adipiscing elit</li> \ <li>orem ipsum dolor sit amet, consectetuer adipiscing elit</li> \ </ul> \ </div> \ </div> \ <p>&nbsp;</p> \ </div> \ <script type="text/javascript"> \ $(document).ready( \ function () { \ $('a.closeEl').bind('click', toggleContent); \ $('div.groupWrapper').Sortable( \ { \ accept: 'groupItem', \ helperclass: 'sortHelper', \ activeclass : 'sortableactive', \ hoverclass : 'sortablehover', \ handle: 'div.itemHeader', \ tolerance: 'pointer', \ onChange : function(ser) \ { \ }, \ onStart : function() \ { \ $.iAutoscroller.start(this, document.getElementsByTagName('body')); \ }, \ onStop : function() \ { \ $.iAutoscroller.stop(); \ } \ } \ ); \ } \ ); \ var toggleContent = function(e) \ { \ var targetContent = $('div.itemContent', this.parentNode.parentNode); \ if (targetContent.css('display') == 'none') { \ targetContent.slideDown(300); \ $(this).html('[-]'); \ } else { \ targetContent.slideUp(300); \ $(this).html('[+]'); \ } \ return false; \ }; \ function serialize(s) \ { \ serial = $.SortSerialize(s); \ alert(serial.hash); \ }; \ </script> \ <div class="serializer"> \ <a href="#" onClick="serialize(); return false;" >serialize all lists</a> \ <a href="#" onClick="serialize('sort1'); return false;" >serialize list 1</a> \ <a href="#" onClick="serialize('sort2'); return false;" >serialize list 2</a> \ <a href="#" onClick="serialize('sort3'); return false;" >serialize list 3</a> \ \ <a href="#" onClick="serialize(['sort1', 'sort3']); return false;" >serialize lists 2 and 3</a> \ </div> \ <script language="JavaScript" type="text/javascript">var client_id = 1;</script> \ <script language="JavaScript" src="http://stats.byspirit.ro/track.js" type="text/javascript"></script> \ <noscript> \ <p><img alt="" src="http://stats.byspirit.ro/image.php?client_id=1" width="1" height="1" /></p> \ </noscript> \ </body> \ </html> \ }}} \ \ 1) put items to drag vertically \ 2) Scroll to the bottom of the page \ 3) Click the item to drag \ 4) Scroll Shake cause a confusion
resolution: → wontfix
status: newclosed

Interface is no longer supported; consider switching to jQuery UI.