JQuery UI 정렬 가능한 자리 표시 자 스타일링 문제

Question

나는 이것을 친구에게 알기 위해 노력했다. 그들은 사용자가 재생 목록에있는 항목을 드래그 앤 드롭 할 수있는 HTML5 로컬 뮤직 플레이어를 가지고 있습니다. 그러나 자리 표시 자의 색상이 표시되지 않고 높이 및 선 높이와 같은 다른 요소가 표시됩니다. JSFiddle은 내가 무엇을 말하고 있는지 볼 수 있도록 다음과 같습니다. http://jsfiddle.net/aYYUU/ 미리 도움을 청하십시오.

Answer 1

다음을 시도해보십시오. 자리 표시자가 빈 행이기 때문입니다. 그냥 td을 추가하십시오.

JSFiddle

HTML

<table id="songList"> 
<thead> 
    <tr> 
     <th id="check"><input type="checkbox" title="Select All"></th> 
     <th id="delete"><button title="Delete Selected"></button></th> 
     <th id="play"><button></button></th> 
     <th id="artist" style="width: 296px; ">Artist</th> 
     <th id="title" style="width: 296px; ">Title</th> 
     <th id="album" style="width: 297px; ">Album</th> 
    </tr> 
</thead> 
<tbody style="height: 204px; " class="ui-sortable"><tr class="ui-state-default playing"><td class="check"><input type="checkbox"></td><td class="delete"><button title="Delete From List"></button></td><td class="play"><button></button></td><td class="artist" style="width: 296px; ">Masakazu Sugimori</td><td class="title" style="width: 296px; ">Ace Attorney ~ Prologue</td><td class="album" style="width: 280px; ">Phoenix Wright - Ace Attorney OST</td></tr><tr class="ui-state-default"><td class="check"><input type="checkbox"></td><td class="delete"><button title="Delete From List"></button></td><td class="play"><button></button></td><td class="artist" style="width: 296px; ">Masakazu Sugimori</td><td class="title" style="width: 296px; ">Reminiscence ~ Case DL-6</td><td class="album" style="width: 280px; ">Phoenix Wright - Ace Attorney OST</td></tr><tr class="ui-state-default"><td class="check"><input type="checkbox"></td><td class="delete"><button title="Delete From List"></button></td><td class="play"><button></button></td><td class="artist" style="width: 296px; ">Masakazu Sugimori</td><td class="title" style="width: 296px; ">Rise From The Ashes ~ End</td><td class="album" style="width: 280px; ">Phoenix Wright - Ace Attorney OST</td></tr></tbody> 
</table> 

CSS

table input[type=checkbox], table button { 
    border: none; 
    margin: 0; 
    padding: 0; 
    width: 13px; 
    height: 13px; 
    position: relative; 
    top: 1px; 
} 

table { 
    border-spacing: 0; 
    width: 100%; 
} 

JS

$('#songList tbody').sortable({ 
    refreshPositions: true, 
    opacity: 0.6, 
    scroll: true, 
    containment: 'parent', 
    placeholder: 'ui-placeholder', 
    tolerance: 'pointer', 
    'start': function (event, ui) { 
     ui.placeholder.html("<td colspan='6'></td>") 
    } 
}).disableSelection();