如何获得JQuery UI可掉落多个元素

我已经给出了一段代码，允许用户将表的一行拖动到div。我已经被要求允许用户选择多行并将它们全部拖动到div。我一直在试图修改我给出的代码来做我需要做的事情。

那么，我有一个行表，其中每行的第一列包含一个下拉框。我希望用户能够选择许多复选框，并能够将与选中的复选框对应的所有行拖动到另一个包含表的复选框中。

我设法让拖动部分工作-用户能够选中许多复选框，它显示了一组被拖动的行。然而，当我删除这些行时，只有一行被删除。谁能帮我删除所有被拖动的行。下面是我的代码:

$(oTable.fnGetNodes()).draggable({
    appendTo: "#event",
    cursor: "move",
    helper: function (event) {
        var checkBoxes = $(".drag");
        var rows = $('#lotsDataTable tr').filter(':has(:checkbox:checked)');
        if (checkBoxes.length > 0) {
            return $('<div class="dragContainer"><table></table></div>').find('table').append(rows.clone()).appendTo('#event');
        } else {
            return $('<div class="dragContainer"><table></table></div>').find('table').append($(event.target).closest('tr').clone()).appendTo('#event');
        }
    }
});
$("#event table").droppable({
    activeClass: "ui-state-default",
    hoverClass: "ui-state-hover",
    accept: ":not()",
    drop: function (event, ui) {
        $(this).find(".placeholder").remove();
        $("<tr></tr>").html(ui.draggable.html()).appendTo(this);
        ui.draggable.draggable({ disabled: true });
    }
});

这是我想添加到的HTML:

<div id="event">
   <div class="datatable clearboth">
        <table id="addLots" class="dataTable clearboth">
            <tr class="placeholder" style="width: 100%">
                <td style="height: 80px;">
                    Drag and drop rows here to add them to this event
                </td>
            </tr>
        </table>
    </div>
</div>