将多个行从一个表拖放到另一个表
我需要通过从表格到另一个表格中选择所需的行来拖放表格行。 首先提供从一个表中选择所需行的选项，然后需要将所有选定的行拖放到其他表中。
我已经完成了将表格从表格拖放到另一个表格的示例。 找到以下代码：
HTML：
ID ClassName 1 Class 1 1 Student 1 2 Student 2 3 Student 3 4 Student 4 5 Student 5
2 Class 2 6 Student 6 7 Student 7 8 Student 8 9 Student 9 10 Student 10
ID ClassName 1 Class 1 1 Student 1 2 Student 2 3 Student 3 4 Student 4 5 Student 5
2 Class 2 6 Student 6 7 Student 7 8 Student 8 9 Student 9 10 Student 10
脚本：
$("#table1 .childgrid tr, #table2 .childgrid tr").draggable({ helper: 'clone', revert: 'invalid', start: function (event, ui) { $(this).css('opacity', '.5'); }, stop: function (event, ui) { $(this).css('opacity', '1'); } }); $("#table1 .childgrid, #table2 .childgrid").droppable({ drop: function (event, ui) { $(ui.draggable).appendTo(this); } }); $(document).on("click", ".childgrid tr", function () { $(this).addClass("selectedRow"); });
CSS：
table { border-collapse:collapse; } table, td, th { border:1px solid black; } .bitacoratable { height: 400px; overflow-y: auto; width: 220px; float:left; } #table1 { margin-right: 100px; } .selectedRow { background-color: #E7E7E7; cursor: move; }
怎么做mutilple行？
此致，Karthik。
你可以使用draggable的帮助函数。 这里有一个很好的实现。
以下是使用上述内容作为特定代码的指南的方式：
JsFiddle演示：
解释发生了什么：
（1）如果只选择了一个，那么我们只需将其视为单个拖放。 因为它还没有被点击（鼠标按住并立即拖动），我们将手动添加selectedRow类以确保它从原始位置正确删除。
(selected.length === 0) { selected = $(this).addClass('selectedRow'); }
（2）创建一个临时容器，将所有行存储为一个单元，就像我们拖动一个项目一样。
var container = $('').attr('id', 'draggingContainer'); container.append(selected.clone().removeClass("selectedRow")); return container;
（3）您可以修改CSS，以便我们在显示移动光标之前始终单击这些项目。 我已经做了，但随意改变它你喜欢。
（4）现在我们将临时分隔符中的所有表行追加到我们选择放入并删除最初选中的所有元素的.childgrid中。
$("#table1 .childgrid, #table2 .childgrid").droppable({ drop: function (event, ui) { $(this).append(ui.helper.children());
$（this）是我们选择的，我们将这些元素追加到辅助函数返回的临时分隔符中，这些是表行。
$('.selectedRow').remove(); }
现在摆脱我们之前选择的那些表行。
});
如果有任何错误，请告诉我，我会尽力排除它们。 它适用于我的目的。 由于您可以突出显示表格行中的文本，因此如果您拖放太快而且您突出显示文本而不是选择行本身，则可能会出现一些问题。