在兩個表格之間拖放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); 

    }