선택 가능 및 모두 선택 취소 버튼 (jQuery)

Question

클릭하면 모든 테이블 행을 강조 표시/강조 표시 할 모든 버튼을 선택 취소/선택하려고합니다. UI에 선택된 클래스를 테이블에 추가하는 것은 상당히 간단하지만 드래그 할 수는 없습니다. 나는 현재에만 버튼이 있습니다

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/