表格行可以拖動嗎？

Question

我有兩個div是浮動：左：

<div id="inventor"> 
<table> 
<tr id="1"><td>Alexander Graham Bell</td></tr> 
<tr id="2"><td>Thomas Edison</td></tr> 
<tr id="3"><td>Nicholas Tesla</td></tr> 
</table> 
</div> 
<form> 
    <div id="invention"> 
     <table> 
     <tr><td><input name="answer1" />Tesla coil</td><td>Explanation</td></tr> 
     <tr><td><input name="answer2" />Telephone</td><td>Explanation</td></tr> 
     <tr><td><input name="answer3" />Phonograph</td><td>Explanation</td></tr> 
     <tr><td><input name="answer4" />Light bulb</td><td>Explanation</td></tr> 
     </table> 
    </div> 
</form> 

，我希望能夠在本發明拖動發明者。

$("#inventor tr").draggable({ 
    revert: "valid" 
}); 

$("#invention tr").droppable({ 
    drop: function(event, ui) { 
     var inventor = ui.draggable.text(); 
     $(this).find("input").val(inventor); 
    } 
}); 

我能得到與列表元素這方面的工作，但現在我加入瞭解釋發明表，我想使用一個表的左側爲造型的目的。

Answer 1

這可能做的伎倆。變化：

• 拖動tr當包裹tr元素中tbody
• 附加了輔助克隆。只有這樣才能讓拖動真正起作用。 （告訴我你是否不想要這個（當你開始拖動時你想從表格中移除tr），我們將看看我們是否能找到解決方案）

javascript。當拖動開始時，創建一個克隆（因爲helper: "clone"），並且c變量將全部引用克隆，拖動tr。當拖動停止時，如果它在可拖拽之外，克隆就會被銷燬。如果是可拖動裏面，我們破壞了克隆和TR（所以它是從列表中刪除，並且不能再拖累）

//this will hold reference to the tr we have dragged and its helper 
var c = {}; 

$("#inventor tr").draggable({ 
     helper: "clone", 
     start: function(event, ui) { 
      c.tr = this; 
      c.helper = ui.helper; 
     } 
}); 


$("#invention tr").droppable({ 
    drop: function(event, ui) { 
     var inventor = ui.draggable.text(); 
     $(this).find("input").val(inventor); 

     $(c.tr).remove(); 
     $(c.helper).remove(); 
    } 
}); 

唯一的新的HTML是tr S的包裝裏面tbody標籤。

這裏有一個演示：基於寺門的演示http://jsfiddle.net/UBG9n/1/

Answer 2

是的，他們就可以了，一個辦法是table row dnd plugin

Answer 3

一個簡單的辦法：http://jsfiddle.net/UBG9n/927

沒有必要提及我們已經拖了tr，因爲jQueryUI的提供ui.draggable和ui.helper我們可以用它來清理拖動元素和幫手：

$(ui.draggable).remove(); 
    $(ui.helper).remove();`