Jquery的拖/放拷貝的細胞內容而不是移動

Question

我有2個表：

• 表1保持了能夠表2.
• 表2可以由被更新內被複制到任何位置的靜態數據從表1 OR或複製的數據移動數據在此表中。

一切正常，除了移動。它當我拖/放副本的內容。

有人有線索嗎？

在這裏，你可以看看online sample：

Answer 1

我解決了這個問題，周圍的工作。我現在只是從原來的TD中刪除內容。我添加了一張額外的桌子作爲垃圾桶。

在線樣本做它應該做的一切。但是，我不確定這是否是最有效的方法。如果涉及到jquery，我相當缺乏經驗。

因此，如果任何人有一個更優雅的解決方案，做同樣的事情，我很願意學習:)

以防萬一，這裏是JQ-碼我用：

jQuery(function($) { 
var td1 = $("#table1 td"); 
var td2 = $("#table2 td"); 
var bin = $("#trash td"); 

td1.draggable({ 
    cursor: "move", 
    appendTo: "body", 
    helper: "clone", 
    opacity: "0.5", 
    revert: "invalid" 
}); 

td2.draggable({ 
    cursor: "move", 
    appendTo: "body", 
    helper: "clone", 
    opacity: "0.5", 
    revert: "invalid" 
}); 

td2.droppable({ 
    accept: 'td', 
    tolerance: "pointer", 
    drop: function (event, ui) { 
     // check from which table we are dragging 
     var fromTable = $(ui.draggable).closest("table").attr("id"); 
     // check from which td we are dragging 
     var fromTD = $(ui.draggable).attr("id"); 
     // get the inner html content for the td we are dragging the div from 
     var cell = $(ui.draggable).html(); 
     // insert the complete html content into the target drop cell 
     $(this).html(cell); 
     // for purposes of result logging/debugging 
     var location = $(this).attr('id'); 
     $('#result').html('Moved '+cell+'<br>From '+fromTable+'/'+fromTD+' (table/td)<br>To cell: '+location+'<br>complete with containing DIV'); 
     // in case we moved cell content within table2, remove the original content 
     if(fromTable == "table2"){ 
      $(ui.draggable).html('<div></div>'); 
     } 
    } 
}); 

bin.droppable({ 
    accept: 'td', 
    tolerance: "pointer", 
    drop: function (event, ui) { 
     // check if we are dragging from table 2 
     var fromTable = $(ui.draggable).closest("table").attr("id"); 
     if(fromTable != "table2"){ 
      $('#result').html('You cannot move content<br>from '+fromTable+' to the trash bin...'); 
      return false; 
     } 
     else { 
      // check from which td we are dragging 
      var fromTD = $(ui.draggable).attr("id"); 
      // get the inner html content for the td we are dragging the div from 
      var cell = $(ui.draggable).html(); 
      // insert the complete html content into the target drop cell 
      $(this).html(cell); 
      // for purposes of result logging/debugging 
      var location = $(this).attr('id'); 
      $('#result').html('Moved '+cell+'<br>From '+fromTable+'/'+fromTD+' (table/td)<br>To the trash bin'); 
      // replace the content of the source td after drop 
      $(ui.draggable).html('<div></div>'); 
     } 
    } 
}); 

}）;