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);, чтобы мы передавали элементы, которые мы выбрали (и их соответствующий текст), и событие, которое возвращает внутренний текст строки таблицы (т.е. выполнено, отложено и удалено).

Переписанный код действия:

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»).