moving rows between tables requires at least one item to be present

[strattonbrazil]

I dropped this code into a couple tables and it works like a charm, where I can drag rows between the two tables. The one thing I noticed though is once a table is completely empty it can never have items put back into it (at least in my simple test). I've tried making the table a minimum size so there's plenty of space, but it will never drop back into the table. Is this not possible because of how sortable works with tables or something? Do I need to switch to divs? I see in the demos there's no issue moving something back to an empty list.

<div data-bind="foreach: menus">
    <table style="display: inline-block;">
      <thead>
        <tr><th data-bind="text: 'Menu: ' + name">Name</th></tr>
      </thead>
      <tbody data-bind="sortable: stuff">
      <tr>...</tr>
      </tbody>
  </table>
</div>

[asleg]

Is it a "droppable" problem, i.e. that the area you want to drop into disappears? If so you can solve it with setting some css-values 'min-height' and 'min-width' Add a class to your top div, f.ex. <div class="dropzone" data-bind="foreach: menus"> Then add this formatting to your css: .dropzone { min-height: 20px; min-width: 100px; }

[strattonbrazil]

I figured it had something to do with the droppable area. The table already has a width because of the headers, but as I "misstated" I've already tried setting the table's minimum height. I can see the table has a size of 150x200 in chrome devtools and the container div is proportionally larger to hold it.

I did finally get it to work, but I had to increase the minimum size of the tbody and set it's display to block, which keeps it a decent size. Otherwise it would be something like 2x4.

table .ui-sortable { // ui-sortable is added by the sortable binding so I just that width: 100%; min-height: 50px; display: block; }

Thanks!

[rniemeyer]

@strattonbrazil - glad you got it sorted out (no pun intended)!