Placeholders shown for all cells in a table row on drag

[flatpaw]

Hi

I'm using ng-sortable for a project where I need a card-style layout, where the cards are displayed in a table of multiple rows. My model is an array of arrays. Here is my HTML:

<div ng-repeat="row in myModel">
  <ul as-sortable data-ng-model="row" class="list-unstyled">
    <li ng-repeat="item in row" class="panel panel-default" as-sortable-item>
       <div class="panel-heading" as-sortable-item-handle>
          ...
       </div>
       <div class="panel-body">
         ...
        </div>
     </li>
   </ul>
 </div>

The <ul> elements are styled with display: table and the <li> elements with display: table-cell. I am able to drag the 'cards' to any row or cell position successfully but when I do placeholder elements are displayed for all cards in the target row rather than just for the card being moved. The other cards are still display but are pushed down. When I release the click the move completes successfully and all the placeholders disappear but the effect of what looks like an empty row of placeholders during the drag doesn't look good.

I've isolated the issue in ng-sortable.js to the functions insertAfter and insertBefore, the first lines of which are:

if (placeHolder.css('display') !== 'table-row') {
  placeHolder.css('display', 'block');
}

If I change this to the following the issue goes away and the drag works as it should with only a placeholder being shown for the card being moved:

if (placeHolder.css('display') !== 'table-row' && placeHolder.css('display') !== 'table-cell') {
  placeHolder.css('display', 'block');
}

So is this a legitimate fix (i.e. one that its worth submitting a pull request for) or will it cause issues elsewhere?

Thanks

[Kuba Przetakiewicz]

Fixed this one in #375, unfortunately I got no response from a5hik yet :(