在两个表格之间拖放n个拖放

Question

我试图在两个表格之间拖动n个拖放行。第一个表格有3列，第二个表格有4列。我有拖放工作。

我看到的所有例子通常在丢弃的位置附加了appendTo。我想要做的是替换拖动行的内容并替换/更新放置位置中的单元格。

我在想如果我可以写一个新的表格（..），然后删除当前删除的行并将其替换为生成的行。或者也许只是更新新位置的列。

(function ($) { 
    $(document).ready(function() { 
    var tb1 = $("#table1 tr"); 
    var tb2 = $("#table2 tr"); 
    tb1.draggable({ 
     appendTo: "body", 
     helper: "clone", 
     opacity: "0.35", 
     revert: "invalid" 
    }); 
    tb2.droppable({ 
     accept: '#table1 tr', 
     tolerance: "pointer", 
     drop: function (event, ui) { 
     //loop through all items in the row 
     var $col1, $col2; 
     tb1.each(function() { 
      $col1 = $("span:eq(0)", this).text(); 
      $col2 = $("span:eq(1)", this).text(); 
     }); 
     $droppedRow = $(this).children('td'); 
     var $destCol1 = $droppedRow.find('span')[0].innerHTML; 
     var $destCol2 = $droppedRow.find('span')[1].innerHTML; 
     var $row = "<tr><td>" & $destCol1 & "</td><td>" & $destCol2 & "</td><td>" & $col1 & "</td><td>" & $col2 & "</td></tr>"; 

     } 

http://jsfiddle.net/S2yC2/7/

任何建议如何进行。 感谢

Answer 1

我认为你正在试图做到这一点：http://jsfiddle.net/S2yC2/15/

drop: function (event, ui) { 

    //Retrieve relevant data of the dragged line 
    var $draggedCol = $(ui.draggable).children('td'); 
    var col1 = $($draggedCol[0]).html(); 
    var col2 = $($draggedCol[1]).html();  

    //Assign data to the void cell of the dropped line 
    var $droppedRow = $(this).children('td'); 
    $($droppedRow[2]).html(col1); 
    $($droppedRow[3]).html(col2); 

    }