Проблема стиля сортируемого заполнителя в пользовательском интерфейсе JQuery - PullRequest
Новая
       14

Проблема стиля сортируемого заполнителя в пользовательском интерфейсе JQuery

1 голос
/ 03 января 2012

Я пытался выяснить это для друга. У них есть локальный музыкальный проигрыватель HTML5, который позволяет пользователю перетаскивать элементы в список воспроизведения. Однако цвет заполнителя не отображается, другие элементы, такие как высота и высота строки. Вот JSFiddle, чтобы вы могли видеть, о чем я говорю: http://jsfiddle.net/aYYUU/ Заранее спасибо за любую помощь.

1 Ответ

14 голосов
/ 03 января 2012

Попробуйте следующее. Это потому, что заполнитель пустая строка. Просто добавьте 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();
...