如何獲取可刪除多個元素的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);