CODEWITHSUNDEEP
javascriptjquerysortingjquery-ui
Nurzhan Nogerbek
Nurzhan Nogerbek

Reputation: 5236

How to disable sorting in JQuery UI?

I use JQuery UI for sorting list items in my Django project. It works well but when in list only one item it steal sortable. User can drag and drop that one item. How to make sorting disable when there is only one item in list(#slides)?

JS:

$(function () {
    $("#slides").sortable({
        start: function (event, ui) {
            ui.placeholder.height(ui.item.height());
        },
        stop: function(event, ui) {
            slide_order = {};

            $("#slides").children().each(function(){
                slide_order[$(this).data('id')] = $(this).index();
            });

            $.ajax({
                url: "sorting/",
                type: "post",
                contentType: 'application/json; charset= utf-8',
                dataType: 'json',
                data: JSON.stringify(slide_order)
            });
        },
    });

    $('#slides .list-group-item').click(function() {
       $("#slides").sortable("refresh");
    });
});

Upvotes: 0

Views: 1338

Answers (2)

Yogen Darji
Yogen Darji

Reputation: 3300

Use disabled property of sortable.

If $("#slides li") has only one li than disabled sorting.

$("#slides").sortable({
    disabled: $("#slides li").length == 1
});

If you want to updated property use below

$('#slides .list-group-item').click(function() {
    $("#slides").sortable("refresh");
    $("#slides").sortable("option", "disabled", $("#slides li").length == 1);
});


<!doctype html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>jQuery UI Sortable - Default functionality</title>
  <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
  <link rel="stylesheet" href="/resources/demos/style.css">
  <style>
    #slides {
      list-style-type: none;
      margin: 0;
      padding: 0;
      width: 60%;
    }
    
    #slides li {
      margin: 0 3px 3px 3px;
      padding: 0.4em;
      padding-left: 1.5em;
      font-size: 1.4em;
      height: 18px;
    }
    
    #slides li span {
      position: absolute;
      margin-left: -1.3em;
    }
  </style>
  <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
  <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
  <script>
    $(function() {

      $("#slides").sortable({
        disabled: $("#slides li").length == 1
      });

      $('#slides').on('click', function() {
        $("#slides").sortable("refresh");
        $("#slides").sortable("option", "disabled", $("#slides li").length == 1);
      });

    });
  </script>
</head>

<body>

  <ul id="slides">
    <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s list-group-item"></span>Item 1</li>

  </ul>

  <button>add</button>
</body>

</html>

Upvotes: 2

4b0
4b0

Reputation: 22323

You can get list#slides length and if only one item 

listitem.addClass('unsortable');

and in sortable use that class with not:

$("#slides").sortable({
     items: "listitem:not(.unsortable)",
   // Your other code --------

    });

Upvotes: 1

Related Questions