list - jQuery UI: Drag Sortable from within Accordion to Outside -
i have 2 sortable lists connected. 1 on page, other within accordion. (i'm using accordion container other list)
my goal such user can open accordion , pull items out of list , onto page.
it works - except placeholder disappears upon leaving accordion. i've tried helper: 'clone' , increasing zindex.
here simplified version of code:
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/redmond/jquery-ui.css" rel="stylesheet" type="text/css"/> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js" type="text/javascript"></script> <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.6/jquery-ui.min.js" type="text/javascript"></script> <script type="text/javascript"> $(document).ready(function(){ $( "#inside" ).accordion({ collapsible: true, fillspace: true, active: false }); $("#uloutsidelist, #ulinsidelist").sortable({ opacity: 0.7, revert: 100, scroll: true, helper: 'clone', zindex: 50000, connectwith: ".connectedsortable", }); }); </script> <div id="outside"> <!-- 1. pick store --> <ul id="uloutsidelist" class="connectedsortable"> <li>outside 1</li> <li>outside 2</li> <li>outside 3</li> </ul> </div> <!-- end 1. pick store --> <div style="clear:both"></div> <div id="inside"> <h3>container</h3> <ul id="ulinsidelist" class="connectedsortable"> <li>inside 1</li> <li>inside 2</li> <li>inside 3</li> </ul> </div>
in sortable call want use following options:
helper: "clone", appendto: "body", // or whatever element want helper clone attached to
this 2 things. first makes copy of element being dragged (helper option), second attaches helper specified element (appendto option).
similar questions here: jquery-ui: cannot drag object outside of accordion , here: jquery sortable cannot dragged outside of accordion
Comments
Post a Comment