jQuery Mobile sortable list
Does it work?
HTML
<script src="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.js"></script>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.min.js"></script>
<script src="https://raw.github.com/furf/jquery-ui-touch-punch/master/jquery.ui.touch-punch.js"></script>
<meta name="viewport" content="width=device-width, initial-scale=1">
<div data-role="page" id="page1">
<div data-role="content">
<ul data-role="listview" data-divider-theme="b" data-inset="true">
<li data-role="list-divider" role="heading">Re-order</li>
<li data-theme="c">1</li>
<li data-theme="c">2</li>
<li data-theme="c">3</li>
<li data-theme="c">4</li>
<li data-theme="c">5</li>
<li data-theme="c">6</li>
<li data-theme="c">7</li>
</ul>
<a data-role="button">Submit</a>
</div>
</div>
JavaScript
$(document).ready(function(e) {
$('li').removeClass('ui-corner-bottom');
$('ul')
.addClass('ui-corner-top')
.removeClass('ui-corner-all')
.sortable({
'containment': 'parent',
'opacity': 0.6,
update: function(event, ui) {
alert("aass");
}
});
});
$("ul").bind("sortupdate",function(event,ui){
alert("hi");
});
$("ul").bind("sortstart",function(event,ui){
alert("start");
});