Opened 14 years ago
Closed 13 years ago
#1126 closed bug (wontfix)
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 (last modified by )
<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
Change History (4)
comment:1 Changed 14 years ago by
comment:3 Changed 14 years ago by
Component: | dimensions → interface |
---|---|
Owner: | changed from paul to stefan |
comment:4 Changed 13 years ago by
Description: | modified (diff) |
---|---|
Resolution: | → wontfix |
Status: | new → closed |
Interface is no longer supported; consider switching to jQuery UI.
Note: See
TracTickets for help on using
tickets.
solution..(??)