CODEWITHSUNDEEP
jqueryjquery-uijquery-ui-sortable
mcmlxxxiii
mcmlxxxiii

Reputation: 933

Cancel dragging of a sortable item

An absolutely common sortable case:

<script>
$(function() {
  $("#sortable").sortable();
});
</script>

<ul id="sortable">
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
</ul>

Problem. Need to cancel dragging of an item on some condition and there is a good advice of Andrew Whitaker, but that approach is working only for jquery-ui-draggable and fails for sortables:

$("#sortable").sortable({
  start: function() {
    return false; // will still cause `this.helper is null`
  }
});

Will be greateful for suggestions.

Upvotes: 25

Views: 51736

Answers (4)

Mottie
Mottie

Reputation: 86463

The sort function callback does the same for sort as drag for draggable (demo):

$("#sortable").sortable({
    sort: function() {
        if ($(this).hasClass("cancel")) {
            $(this).sortable("cancel");
        }
    }
});

Upvotes: 16

Mj Azani
Mj Azani

Reputation: 241

Try this example

$('#list1').sortable({
    connectWith: 'ul'
});    

$('#list2').sortable({
    connectWith: 'ul',
    receive: function(ev, ui) {
       if(ui.item.hasClass("number"))
          ui.sender.sortable("cancel");
    }
});

Upvotes: 10

root
root

Reputation: 2356

Sortable has a "cancel" capability invoked using sortable('cancel').

From the docs: "Cancels a change in the current sortable and reverts it to the state prior to when the current sort was started." See http://api.jqueryui.com/sortable/#method-cancel.

Example usage:

$("#sortable").sortable({
  stop: function(e, ui) {
    if ("I need to cancel this") {
      $(ui.sender).sortable('cancel');
    }
  }
});

Upvotes: 28

Ben Blank
Ben Blank

Reputation: 56624

Returning false as fudgey suggests works great for making things dynamically unsortable, but there's also a cancel option in the sortable config which lets you set up static unsortables as well:

$("#sortable").sortable({
    // this prevents all buttons, form fields, and elemens
    // with the "unsortable" class from being dragged
    cancel: ":input, button, .unsortable"
});

Upvotes: 29

Related Questions