Stacked Stacked - 5 months ago 25
jQuery Question

Selectable and Un/Select all button (jQuery)

I am attempting to make un/select all buttons that will un/highlight all table rows when clicked. It is fairly straight forward to add the ui-selected class to the table, but not make them draggable. Here is my code that demonstrates the selectable/draggable/droppable functionality:

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

I currently only have this for the buttons.

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


How would I go about making these buttons/links select all of the tables and allow the draggable/droppable functionality to work? Would I have to break my current .selectable() chain into separate functions and use .on() to trigger selectable()?

Any help appreciated, thanks!

Answer

Try this one:

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

See updated fiddle : https://jsfiddle.net/ersamrow/s7mtbn26/6/