Question

我正在尝试在桌面上实现draggable - droppable。我已将类dragItem添加到可拖动区域（行中的第一个input）。拖动此区域时没有任何反应（我希望整行显示可拖动的效果，放下时，重新定位在表格内）。

是否可以在此表上实现draggable - droppable？

示例是here

HTML code：

<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();

可拖动的droppable无法在桌面上工作

1 个答案: