CODEWITHSUNDEEP
jquery-ui-sortablejavaquery
Andy M
Andy M

Reputation: 167

Disable sorting from a sortable list

I am looking at this "Sortable example" and I can see that the user is able to re-arrange numbers, the source for the above example : 

  <!doctype html>
  <html lang="en">
<head>
  <meta charset="utf-8" />
  <title>jQuery UI Sortable - Display as grid</title>
  <link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
  <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
  <script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
  <link rel="stylesheet" href="/resources/demos/style.css" />
  <style>
  #sortable { list-style-type: none; margin: 0; padding: 0; width: 450px; }
  #sortable li { margin: 3px 3px 3px 0; padding: 1px; float: left; width: 100px; height: 90px; font-size: 4em; text-align: center; }
  </style>
  <script>
  $(function() {
    $( "#sortable" ).sortable();
    $( "#sortable" ).disableSelection();
  });
  </script>
</head>
<body>

<ul id="sortable">
  <li class="ui-state-default">1</li>
  <li class="ui-state-default">2</li>
  <li class="ui-state-default">3</li>
  <li class="ui-state-default">4</li>
  <li class="ui-state-default">5</li>
  <li class="ui-state-default">6</li>
  <li class="ui-state-default">7</li>
  <li class="ui-state-default">8</li>
  <li class="ui-state-default">9</li>
  <li class="ui-state-default">10</li>
  <li class="ui-state-default">11</li>
  <li class="ui-state-default">12</li>
</ul>


</body>
</html>

is it possible to sort this example so it sorts the numbers from smallest to largest and does not allow the user to re-arrange the numbers? for example if I try to drag 12 and place it before 1, it automatically goes back to its original place.

Thank you

Upvotes: 0

Views: 109

Answers (1)

Elliott Frisch
Elliott Frisch

Reputation: 201467

Don't call sortable, just sort the list in reverse order. The sortable function allows the user to drag an item. If you didn't call disableSelection then them items in the list would be selectable.

$(function() {
    try {
            var html = $('#sortable').html();
            var arr = html.split('</li>');
            html = '';
            for (var i = arr.length - 1; i >= 0; --i) {
                    html += arr[i] + "</li>";
            }
            $('#sortable').html(html);
    } catch (e) {
            alert(e);
    }

});

Upvotes: 0

Related Questions