jquery ui를 사용하여 테이블 본문에서 드래그 가능하고 정렬 가능한 방법

Question

Draggable이 현재 작동 중입니다.이 열에서도 sortable 프로 시저를 사용하고 싶습니다. 이것들은 요소 인 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; 
} 

자바 스크립트

$(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과 함께 draggable을 사용하면 삭제 된 항목을 요소에 추가 할 수 있습니다. Draggable은 단순히 위치를 조정하지만 DOM에서 위치를 변경하지는 않습니다.

항목을 테이블 셀에 놓으면 drop 콜백이 작업을 수행합니다. CSS를 사용하면 항목을 셀의 올바른 위치에 놓을 수 있습니다.