Выбираемая и Un/Select all button (jQuery)

Question

Я пытаюсь сделать un/select все кнопки, которые будут удалять/выделять все строки таблицы при нажатии. Довольно просто добавить выбранный ui класс в таблицу, но не сделать их перетаскиваемыми. Вот мой код, который демонстрирует выбираемый/перемещаемой/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(); 
}); 

Как будет идти о том, чтобы эти кнопки/ссылки выбрать все таблицы и позволяют перетаскивать/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" 
    }); 
} 

Смотрите обновленный скрипку: https://jsfiddle.net/ersamrow/s7mtbn26/6/