jquery - jQuery UI: Don't allow sortable if this element exists

Question

I don't want to allow a ul's lis to be sortable if there is one or more elements with the class unsaved inside it. How to achieve this?

Psuedo code:

var $my_list = $('#my-list');

$my_list.sortable({
    start: function() {
        if($('.unsaved', $my_list).length) {
            // DONOT ALLOW SORTING
        } else {
            // OK GO AHEAD AND SORT ALL YOU WANT
        }
    }
});

$my_list.disableSelection();

Edit

Sorry I should have been more clear. I can't just do a check to see if elements with the class unsaved exists before apply the sortable method on the list because at any given time an element can be added or removed to the list with the class unsaved.

In fact when the page loads there will never be an element with class unsaved on the list. But during the course of time an element with that class can be added and if so I don't want the user to be able to sort and as soon as it is removed I want to re-enable sorting.

Hope that clarifies my issue.

Answer 1

you could track the list updates

for ex:

// add new item to list, every time a new item added, refresh/remove the sortable
function add_item(item, $my_list){
  // add item stuff here
  if($my_list.find('.unsaved').length > 0){ 
     $my_list.sortable( "destroy" );
  } else {
     $my_list.sortable();
  }
}

function remove_item(item, $my_list){
  // remove item stuff here
  if($my_list.find('.unsaved').length > 0){ 
     $my_list.sortable( "destroy" );
  } else {
     $my_list.sortable();
  }
}

Make it simple. Since it is ul tag.

$('body').on('my_list_ul_selector_here', 'change', function(){
  if($(this).find('.unsaved').length > 0){ 
     $(this).sortable( "destroy" );
  } else {
     $(this).sortable();
  }
});

Answer 2

您不能使用可排序小部件的开始事件，因为到那时取消它为时已晚。在列表中使用 mousedown 事件，如下所示：

var $my_list = $('#my-list');
$my_list.sortable();
$my_list.disableSelection();

$('#my-list').on('mousedown', 'li', function () {
    if ($('.unsaved', $my_list).length) {
        $my_list.sortable('disable');
    } else {
        $my_list.sortable('enable');
    }
});

jsFiddle 示例

Answer 3

你应该在你的清单之前做你的检查。.sortable