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 comment:1
Changed April 16, 2007 07:38AM UTC by comment:2
style='height:20px'
->
height is drag item Height
Changed April 16, 2007 02:43PM UTC by comment:3
| component: | dimensions → interface |
|---|---|
| owner: | paul → stefan |
Changed March 31, 2008 01:36AM UTC by 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> </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 → {{{ \ <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 |
|---|---|
| resolution: | → wontfix |
| status: | new → closed |
Interface is no longer supported; consider switching to jQuery UI.
solution..(??)
onStart : function(){ $('body').append("<div id='autoHeight' style='height:20px'></div>"); } onStop : function(){ $('#autoHeight').remove(); }