javascript - 可选择和取消/全选按钮 (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"
  });
}

查看更新的 fiddle : https://jsfiddle.net/ersamrow/s7mtbn26/6/