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

Question

这是Fiddle

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

我的示例最初基于我在这里找到的另一个演示:multi drag demo

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

<table class="DraggableThings">
  <tr draggable='true'><td >Row 1</td></tr>
  <tr draggable='true'><td >Row 2</td></tr>
  <tr draggable='true'><td >Row 3 </td></tr>
</table>

<table id='menu_table'>
  <tbody>
    <tr>
        <td class='droppableItem' >accomplished</td>
    </tr>
  </tbody>
</table>

这是 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;
}

这是Fiddle

希望有人知道答案 谢谢

Answer 1

这是一个JSFiddle演示，但我建议修复表格行，因为拖动多行有时会将一个表格行与另一个表格行混淆，因为它们的间距没有那么大，因此它无法告诉您要尝试将元素放置到哪个表格行。为了测试目的，我将它们放大了。

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

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

重写后的 Action 代码为:

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”)。