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 :(