如何获取可删除多个元素的JQuery UI？

Question

我得到了一段代码，该代码允许用户将表的一行拖到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>

Answer 1

只有您的助手具有修改后的内容，原始可拖动对象仍然仅包含原始可拖动对象。 您可以尝试将帮助程序的内容转储到新的<tr> ：

$("<tr></tr>").html(ui.helper.html()).appendTo(this);