Draggable droppable不能在桌子上工作

Question

我正在嘗試在桌子上實施draggable - droppable。我已將類dragItem添加到可拖動區域（行中的第一個input）。當這個區域被拖拽時，什麼都不會發生（我希望整行顯示可拖動的效果，以及何時放下，以便在表格內重新定位）。

是否可以在此表上實現可拖放 - 可拖放？

實施例是here

HTML代碼：

<table id="tableUSNW"> 
<thead> 
<th id="th1">Stolpec 1</th> 
    <th id="th2">Stolpec 2</th> 
    <th id="th3">Stolpec 3</th> 
    </thead> 
<tbody> 
    <tr data-userkey="test1"><td><input value="drag 1" class="dragItem" readonly></td><td id="td1" data-ref="test1"><input id="inputChk" type="checkbox"></td><td>test2</td><td id="td3">test XX</td></tr> 
    <tr data-userkey="test2"><td><input value="drag 2" class="dragItem" readonly></td><td id="td1" data-ref="test2"><input id="inputChk" type="checkbox"></td><td>test3</td><td id="td3">test YY</td></tr> 
    <tr data-userkey="test3"><td><input value="drag 3" class="dragItem" readonly></td><td id="td1" data-ref="test3"><input id="inputChk" type="checkbox"></td><td>test4</td><td id="td3">test ZZ</td></tr> 
    <tr data-userkey="test4"><td><input value="drag 4" class="dragItem" readonly></td><td id="td1" data-ref="test4"><input id="inputChk" type="checkbox"></td><td>test5</td><td id="td3">test BB</td></tr> 
    <tr data-userkey="test5"><td><input value="drag 5" class="dragItem" readonly></td><td id="td1" data-ref="test5"><input id="inputChk" type="checkbox"></td><td>test6</td><td id="td3">test CC</td></tr> 


    <tbody> 
</table> 

<br/> 
<br/> 

JQuery的：

$(function(){ 

    $(".dragItem").draggable(); 

     $("#tableUSNW tr").droppable({ 
     drop: function(event, ui) { 
      $(this).append($(ui.draggable)); 
     } 
    }); 

}) 

Answer 1

WorkingFiddle

對於此用途sortabl。

$("tbody").sortable({ 
    items: "> tr", 
    appendTo: "parent", 
    helper: "clone" 
}).disableSelection();