directive inserts dropped element in the wrong place when used on a <table> element

[rettgerst]

here is my basic html:

<table>
    <thead>
        <tr>
            <td>1</td>
            <td>2</td>
            <td>3</td>
            <td>4</td>
            <td>5</td>
        </tr>
    </thead>
    <tbody
        dnd-list="model.list"
        >
        <style scoped>
            .dndDraggingSource {
                display: none;
            }
        </style>
        <tr class="dndPlaceholder">
            <td colspan="4">- Drop file here -</td>
        </tr>
        <tr
            ng-repeat="item in model.list"
            dnd-draggable="item"
            dnd-moved="model.list.splice($index, 1)"
            dnd-effect-allowed="move"
            >
            <td>...</td>
            <td>...</td>
            <td>...</td>
            <td>...</td>
            <td>...</td>
        </tr>
    </tbody>
</table>

very simple and based on the "simple list" example.

when I drop a file, the directive places the item one below where it should be. if I wanted to drag an item at index N it would place it at N+1.

[robbporto]

Same problem here.

[rettgerst]

here is how I worked around this issue:

1) change the dnd-moved attribute on the <tr> element to dnd-dragstart 2) give the <tbody> element a dnd-drop attribute: model.listDrop(item, index) 3) and that callback:

vm.listDrop = function (item, index) {
    vm.list.splice(index - 1, 0, item);
    $scope.$apply();
    return true;
};

[jformoe]

I was having this issue for a ul with draggable li elements, but realized I had an extra li element at the top that wasn't part of the ng-repeat, causing everything to be off by one.

In @rettgerst's html above, same is true with the table (extra tr at the top, not part of the ng-repeat).

So I think this bug may be considere user-error :(