knockout.jsknockout-sortable

knockout sortable table - drop to empty tbody

I am trying to emulate part of Drupal Admin where you can drag items around in a table to re-order them. You can also drag items to a 'hidden' section of the table.

When there are no hidden items the table shows a row that says 'no hidden items':

I have tried to do this with a table that has two tbody tags, one with visible items and one with hidden items.

Problem: you can't drag and drop elements to an empty tbody - there are no pixels to drop onto. Problem 2: Showing the 'No hidden items' message.

EDIT

drupal style re-order items, with bugs

// too much code to paste here

This example sort of works in Chrome as you can drop to an empty list, but not in Firefox. See 'problem 2' above, the message should act as a big drop target.

Solution

  • Here's how you can achieve it..

    Apply a CSS which will increase the padding of placeholder when hidden array is empty.

    <tbody data-bind="css: hidden().length === 0 ? 'empty-placeholder' : '', sortable: { data: hidden, options: { handle: '.sortableHandle', cursor: 'move' } }">
    <tr>
        <td data-bind="text: $data" class="sortableHandle"></td>
    </tr>
</tbody>

    Add this CSS in stylesheet. Customize as per your choice but keep the padding or space so that drop event will be able to pickup the target.

    .empty-placeholder{
    display:block;
    padding:10px 0;
    width:100%;
    background:#eee;
}

    JSFIddle : http://jsfiddle.net/rahulrulez/pL0t7o1q/9/