可选择和取消/全选按钮 (jQuery)

Question

我正在尝试取消/选择所有在单击时取消/突出显示所有表格行的按钮。将 ui-selected 类添加到表中是相当直接的，但不会使它们可拖动。这是我演示可选择/可拖动/可放置功能的代码：

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/