jquery - jQuery UI: この要素が存在する場合、並べ替えを許可しない

Question

内部にクラスを持つ要素が 1 つ以上ある場合、 aulのs をソート可能にしたくありません。これを達成する方法は？liunsaved

疑似コード:

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();

編集

申し訳ありませんが、もっと明確にする必要がありました。リストにソート可能なメソッドを適用する前に、クラスを持つ要素が存在するかどうかを確認することはできませんunsaved。これは、クラスが保存されていないリストにいつでも要素を追加または削除できるためです。

実際、ページがロードされるとき、クラスが保存されていない要素がリストに表示されることはありません。しかし、時間の経過とともに、そのクラスの要素を追加できます。その場合、ユーザーが並べ替えを実行できないようにし、削除されたらすぐに並べ替えを再度有効にしたいと考えています。

私の問題が明確になることを願っています。

Answer 1

リストの更新を追跡できます

例：

// 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();
  }
}

それを簡単に。ulタグなので。

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

Answer 2

リストの前にチェックを行う必要があります.sortable。