多个拖放元素 - jqueryUI

Question

我正在尝试多次选择行并将它们拖到另一个容器中。

$(".draggable_tr").click(function() 
...

调用

函数并在tr中追加选定的Row类。但是，ui-draggable ui-draggable-handle 未附加在tr中。此版本已上传到jsFiddle

Html代码

    <div class="new-drag">                    
      <div class="myHeight" style="width: auto;" ng-scrollbars>
        <div id="table1" class="bitacoratable">
          <table id="table1" class="table table-hover table-striped childgrid border-zero">
              <tr class="draggable_tr " ng-repeat="t in tabledata">
                  <td width="30" class="table-hover-dots">
                      <i class="table-dots dots"></i>
                      <div class="w-15 custom-inputs checkbox">
                          <input type="checkbox" name="check" id="check-1">
                          <label for="check-1"></label>
                      </div>
                  </td>
                  <td width="60" >{{t.id}}</td> 
                  <td width="200">

                  {{t.name}}
                      </a>
                  </td>
                  <td width="60">{{t.dep_no}}</td>
                  <td width="80">{{t.status}}</td>
                  <td width="80">{{t.city}}</td>                                       
              </tr>     
              </table>
          </div>
       </div>
    </div>

    JS Code:

    $("#table1 .childgrid tr, #table2 .childgrid tr").draggable({
    helper: function(){
        var selected = $('.childgrid tr.selectedRow');
            if (selected.length === 0) {
                selected = $(this).addClass('selectedRow');
    }
        var container = $('<div/>').attr('id', 'draggingContainer');            
        container.append(selected.clone().removeClass("selectedRow"));
        return container;
    }
    });


    $("#table2 .childgrid").droppable({
    drop: function (event, ui) {
    console.log(angular.toJson(event));
    $(this).append(ui.helper.children());
    //$('.selectedRow').remove();
    }
    });
    $scope.tabledata=[{"name":"domas","id":2,"dep_no":"de_09","status":"Active","city":"Newyork"},{"name":"domas","id":2,"dep_no":"de_09","status":"Active","city":"Newyork"},{"name":"domas","id":2,"dep_no":"de_09","status":"Active","city":"Newyork"},{"name":"domas","id":2,"dep_no":"de_09","status":"Active","city":"Newyork"},{"name":"domas","id":2,"dep_no":"de_09","status":"Active","city":"Newyork"}]

    $(".draggable_tr").click(function(){                    
    $(this).toggleClass("selectedRow");
    });