i have tried following demo working using collapsible set instead of listview , unable so:
http://forresst.github.io/2012/06/22/make-a-list-jquery-mobile-sortable-by-drag-and-drop/
once collapsible set made sortable, collapse functionality gets broken.
i using:
jquery mobile 1.4.5
jquery 1.11.0
jquery-ui 1.11.4
cordova 6.3.0
and i'm testing on android (sgs4)
html:
<script type="text/javascript" src="lib/jquery/jquery-1.11.0.min.js"></script> <script type="text/javascript" src="lib/jqm/jquery.mobile-1.4.5.min.js"></script> <script type="text/javascript" src="lib/jquery-ui/jquery-ui.min.js"></script> <script type="text/javascript" src="lib/jquery-ui/jquery-ui.touch-punch.min.js"></script> <div data-role="page" id="test"> <div role="main" class="ui-content"> <div data-role="collapsibleset" data-theme="a" data-content-theme="a" class="sortable"> <div data-role="collapsible"> <h3>section 1</h3> <p>i'm collapsible content section 1</p> </div> <div data-role="collapsible"> <h3>section 2</h3> <p>i'm collapsible content section 2</p> </div> <div data-role="collapsible"> <h3>section 3</h3> <p>i'm collapsible content section 3</p> </div> </div> </div><!-- /content --> </div><!-- /test page --> javascript:
$(document).on("pageshow","#test",function(){ $( ".sortable" ).sortable(); $( ".sortable" ).disableselection(); /// refresh list end of sort have correct display $( ".sortable" ).bind( "sortstop", function(event, ui) { $('.sortable').collapsibleset('refresh'); // $('.sortable').listview('refresh'); }); });
pageshow event not firing. go through following code, working perfectly.
html code:
<html> <head> <title>drag , drop</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="http://code.jquery.com/mobile/git/jquery.mobile-git.css"> <script src="http://code.jquery.com/jquery-1.10.2.js"></script> <script src="http://code.jquery.com/mobile/git/jquery.mobile-git.js"></script> <script src="http://code.jquery.com/ui/1.10.3/jquery-ui.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui-touch-punch/0.2.3/jquery.ui.touch-punch.min.js"></script> </head> <body> <div data-role="page" id="test"> <div role="main" class="ui-content"> <div data-role="collapsibleset" data-theme="a" data-content-theme="a" class="sortable"> <div data-role="collapsible"> <h3>section 1</h3> <p>i'm collapsible content section 1</p> </div> <div data-role="collapsible"> <h3>section 2</h3> <p>i'm collapsible content section 2</p> </div> <div data-role="collapsible"> <h3>section 3</h3> <p>i'm collapsible content section 3</p> </div> </div> </div><!-- /content --> </div><!-- /test page --> </body> </html> js code:
$(document).ready(function(){ $(".sortable").sortable(); $(".sortable").disableselection(); /// refresh list end of sort have correct display $(".sortable").bind( "sortstop", function(event, ui) { $('.sortable').collapsibleset('refresh'); // $('.sortable').listview('refresh'); }); }); 
Comments
Post a Comment