jquery uiを使用してテーブル本体tdでドラッグ＆ソートする方法

Question

Draggableが現在動作しており、これらの列でもソート可能なプロシージャを使用したいと考えています。これらは単純なdiv要素で、jQuery UIを使用してsortableにしたいと考えています。下のコードに間違いがある場合は、教えてください。

<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のクラスを持っているので、私は単一のセレクタとしてこれを使用します。 drappableとdrappableを併用すると、ドロップされた項目を要素に追加できます。 Draggableは単に位置を調整しますが、DOM内の位置は変更しません。

アイテムをテーブルセルにドロップすると、dropコールバックが処理を行います。 CSSは、アイテムをセルの正しい位置にドロップするのに役立ちます。