すべてを選択/選択解除ボタン（jQuery）

Question

クリックすると、すべての表の行を表示/非表示にするすべてのボタンの選択を解除/選択しようとしています。 uiで選択されたクラスをテーブルに追加するのはかなり簡単ですが、それらをドラッグ可能にすることはできません。ここで選択/ドラッグ/ドロップ可能な機能を示しています私のコードは次のとおりです。

https://jsfiddle.net/Unfixed/s7mtbn26/3/

私は現在、ボタンのみのためにこれを持っています。私はこれらのボタン/リンクを作成するに行くかどう

$("#selectall").on('click', function(evt) { 
    $("tr.selectable").each(function() { 
      $(this).addClass("ui-selected"); 
     }); 
    evt.preventDefault(); 
}); 

    $("#unselectall").on('click', function(evt) { 
    $("tr.selectable").each(function() { 
      $(this).removeClass("ui-selected"); 
     }); 
    evt.preventDefault(); 
}); 

テーブルのすべてを選択し、ドラッグ/ドロップ可能な機能が動作することができますか？現在の.selectable（）チェーンを別の関数に分割し、.on（）を使用してselectable（）をトリガーする必要がありますか？

ご協力いただきありがとうございます。

Answer 1

は、この方法を試してください。

$("#selectall").on('click', function(evt) { 
    $("tr.selectable").each(function() { 
    $(this).addClass("ui-selected"); 
    }); 
    draggables(); 
    evt.preventDefault(); 
}); 

function draggables() { 
    $("tr.ui-droppable").draggable('destroy'); 
    $("tr.ui-droppable").droppable("destroy"); 
    $("tr.ui-selected").draggable({ 
    helper: function() { 
     var c = $("tr.ui-selected").length; 
     var dom = []; 
     dom.push("<div style=\"border:2px solid black;width:50px;height:20px;line-height:25px;\">", 
     "<center>Files Selected: " + c + "</center></div>"); 
     return $(dom.join('')); 
    }, 
    revert: 'invalid', 
    appendTo: 'parent', 
    containment: '#filemanager', 
    axis: 'y', 
    cursor: '-moz-grabbing' 
    }); 
    $("tr.droppable").droppable({ 
    hoverClass: "ui-state-active" 
    }); 
} 

が更新フィドルを参照してください： https://jsfiddle.net/ersamrow/s7mtbn26/6/