如何使用jQuery UI做可拖動和可排序的表體td

Question

Draggable現在正在工作，我希望可排序的過程也可以與這些列一起工作。這些簡單的div元素，我想sortable使用jQuery UI。請讓我知道下面的代碼是否有問題。

<table class="table table-bordered table-condensed"> 
    <thead> 
     <tr> 
      <th></th> 
      <th></th> 
      <th></th> 
      <th></th> 
      <th></th> 
      <th></th> 
      <th></th> 
      <th></th> 
      <th></th> 
      <th></th> 
      <th></th> 
      <th></th> 
     </tr> 
    </thead> 
    <tbody> 
     <tr> 
      <td>File A</td> 
      <td><span id="draggable" class="label label-default ui-widget-content filediv"> </span></td> 
      <td></td> 
      <td><span id="draggable1" class="label label-default ui-widget-content filediv"> </span></td> 
      <td></td> 
      <td></td> 
      <td></td> 
      <td></td> 
      <td></td> 
      <td></td> 
      <td></td> 
      <td></td> 
     </tr> 
     <tr> 
      <td>File B</td> 
      <td></td> 
      <td><span id="draggable2" class="label label-success ui-widget-content filediv"> </span></td> 
      <td></td> 
      <td></td> 
      <td></td> 
      <td></td> 
      <td></td> 
      <td></td> 
      <td></td> 
      <td></td> 
      <td></td> 
     </tr> 
    </tbody> 
</table> 
<script> 
    $(function() { 
    $("#draggable").draggable(); 
    $("#draggable1").draggable(); 
    $("#draggable2").draggable(); 
    }); 
</script> 

Answer 1

我採取了一些猜測，但我認爲你想要拖放，而不是排序。

例子：https://jsfiddle.net/g21dso7e/2/

CSS

.table-bordered { 
    border: 1px solid #000; 
} 

.table-condensed { 
    border-collapse: collapse; 
} 

.table tr { 
    padding: 0.2em; 
    border: 1px solid #000; 
} 

.table tr td { 
    border-left: 1px solid #000; 
    min-width: 1.5em; 
    min-height: 1.5em; 
    position: relative; 
} 

.table tr td span.label { 
    position: absolute; 
    top: 0.4em; 
    left: 0.2em; 
} 

的JavaScript

$(function() { 
    $(".label").draggable(); 
    $(".table tbody tr td").droppable({ 
    accept: ".label", 
    drop: function(e, ui) { 
     ui.draggable.appendTo($(this)).css({ 
     top: "0.4em", 
     left: "0.2em" 
     }); 
    } 
    }); 
}); 

既然你有一類label每個，我會用這個作爲一個單一的選擇。當draggable與droppable一起使用時，可以將所刪除的項目追加到元素。 Draggable只是簡單地調整它的位置，但不會改變它在DOM中的位置。

當物品放在表格單元上時，drop回調爲我們完成了這項工作。 CSS有助於將物品放入單元格中的正確位置。