jQuery Mobile sortable list

Does it work?

by Aras Balali Moghaddam

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>
<div id="container">
<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">This is just an example jqury mobile list view</li>
            <li data-theme="c">Item 1</li>
            <li data-theme="c">Item 2 </li>
            <li data-theme="c">Item 3 with a very very very long text that will probably go out of the space allocated to this item</li>
            <li data-theme="c">Item 4</li>
            <li data-theme="c">Item 5</li>
            <li data-theme="c">Item 6</li>
            <li data-theme="c">Item 7 - the last item</li>
        </ul>
        <a data-role="button">OK</a>
    </div>
</div>
</div>

CSS

#container {
  position: absolute;
  top: 0;
  left: 0;
  width: 30em;
  height: 40em;
  background-color: darkgrey;
  overflow: hidden;
}

JavaScript

$(document).ready(function(e) {

});