如何让 JQuery UI Droppable 删除多个元素？答案

【问题标题】：How to Get JQuery UI Droppable to Drop Multiple Elements?如何让 JQuery UI Droppable 删除多个元素？
【发布时间】：2014-08-01 14:56:05
【问题描述】：

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

【问题讨论】：

标签： javascript jquery html jquery-ui-draggable jquery-ui-droppable

【解决方案1】：

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

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

【讨论】：