可选和取消/全选按钮（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/