JQuery: How to drag multiple rows from one table to another?

Question

Here's the Fiddle

I have a table with draggable rows that are multi-selectable, but I want to drag them en masse to another table and drop them there - not to be appended as additional elements to the other table, but to do some stuff with the information, i.e. form submission.

My example is originally based on another demo I found here: multi drag demo

Here is the HTML code for the basic example of this problem.

<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>

Here is the JQuery code

$('.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;
}

Here's the Fiddle

Hope someone knows the answer Thank you

Answer 1

Here's a JSFiddle demonstration, but I suggest fixing up the table rows because dragging multiple rows sometimes confuses one table row for another because they're not spaced out that much, so it can't tell to which table row you're trying to place the elements. I made them bigger for testing purposes.

You could do something along the lines of clicking rather than dragging to guarantee you add it to the right category.

It's the same code as in your other question, except we switched it up to action(ui.helper.children(), event); so that we're passing the elements we selected (and their respective text) and the event, which returns the table row's inner text (i.e. accomplished, postponed, and deleted).

The rewritten action code is:

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

We post to the log in a loop, so that we get all the elements we selected separately. b.target.innerText gets the category (again, i.e. accomplished, postponed, and deleted). Not looping through it means we're getting the concatenation of all the elements (e.g. "Row1Row2").