JQuery：如何将多行从一个表拖到另一个表？

这是小提琴

我有一个可以多行选择的可拖动行的表，但是我想将它们一起拖到另一个表中并将它们拖放到那里 – 不要作为附加元素附加到另一个表中，而是用信息做一些事情，即表格提交。

我的例子最初基于我在这里找到的另一个演示： 多拖动演示

以下是此问题基本示例的HTML代码。

 
Row 1
 
Row 2
 
Row 3 
 
 
 
 
 
accomplished
 
 
  

这是JQuery代码

 $('.droppableItem') .bind('dragenter dragover', false) .bind('drop', function(event){ accomplished($(this),event); }); $('.DraggableThings tr').bind('click', function () { $(this).toggleClass("selected"); }); $('.DraggableThings tr').bind('dragstart', function(event){ var mytext = event.target.innerText; event.originalEvent.dataTransfer.setData('txt', mytext ); }); $('.DraggableThings tr').drag("init", function () { return $('.selected'); }).drag(function (ev, dd) { $(this).css({ top: dd.offsetY, left: dd.offsetX }); }); function accomplished(thing,event) { event.dataTransfer = event.originalEvent.dataTransfer; var data = event.dataTransfer.getData('txt'); log(data + " made it to accomplishments"); } 

CSS

 .selected { background-color: #ECB; } 

这是小提琴

希望有人知道答案谢谢

Answer 1

这是一个JSFiddle演示，但我建议修复表行，因为拖动多行有时会将一个表行混淆为另一个表行，因为它们没有间隔那么多，所以它无法告诉您要放置哪个表行要素。 为了测试目的，我把它们做得更大。

您可以按照点击而不是拖动的方式执行某些操作，以确保将其添加到正确的类别中。

它与你的其他问题中的代码相同，只是我们将其切换为action(ui.helper.children(), event); 这样我们就可以传递我们选择的元素（及其各自的文本）和事件，它返回表格行的内部文本（即完成，推迟和删除）。

重写的动作代码是：

 function action(a,b) { for(var i = 0; i < a.length; i++) log(a[i].innerText + " made it to " + b.target.innerText); } 

我们在循环中发布日志，以便我们获得我们单独选择的所有元素。 b.target.innerText获取类别（再次，即完成，推迟和删除）。 不循环通过它意味着我们正在获得所有元素的连接（例如“Row1Row2”）。