テーブル上でドラッグ可能なドロップブルが機能していない

Question

テーブルにdraggable-droppableを実装しようとしています。私はクラスdragItemをドラッグ可能な領域に追加しました（最初の行はinput）。この領域がドラッグされても何も起こりません（私は行全体をドラッグ可能なエフェクトとして表示し、ドロップした場合はテーブル内の位置を変更します）。

このテーブルでdraggable-droppableを実装することは可能ですか？

<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：この使用sortablについて

$(function(){ 

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

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

}) 

Answer 1

WorkingFiddle

例here

HTMLコードです。

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