可选和 Un/Select 所有按钮 (jQuery)

Question

我正在尝试制作 un/select 所有按钮，这些按钮在单击时将 un/highlight 所有 table 行。将 ui-selected class 添加到 table 非常简单，但不能使它们可拖动。这是我演示 selectable/draggable/droppable 功能的代码：

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

我将如何制作这些 buttons/links select 所有 table 并允许 draggable/droppable 功能工作？我是否必须将当前的 .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/

可选和 Un/Select 所有按钮 (jQuery)

Selectable and Un/Select all button (jQuery)

javascript

jquery

jquery-ui

jquery-ui-selectable