Breaks layout in combination with :last-child css selector

[jakobmaier]

When using css styles like this:

.listOfElementsToSort .elementThatCanBeDragged:last-child{
    margin-bottom: 0;
}

The layout can break during dragging when the last element is moved. The reason for this is that the dragged element gets cloned (the clone is hidden though), and the selector is therefore applied to the wrong element, resulting in an additional margin during dragging.

I didn't find a workaround for this issue.

[timbell]

I just hit the same issue - I'm using bootstrap3 which does .list-group-item:last-child { margin-bottom: 0; ....

Not particularly satisfactory, but the following code changes will ensure that the (hidden) original element is never the last child during sorting. In the candidates.forEach callback change:

if(cand.after)
    cand.element.after($placeholder);
else
    insertElementBefore(cand.element, $placeholder);

to:

if (cand.after) {
    var $next = cand.element.next();
    if ($next[0] === $original[0]) {
        $next.after($placeholder);
    }
    else {
        cand.element.after($placeholder);
    }
}
else {
    var $next = cand.element.next();
    if ($next[0] === $original[0]) {
        $next.after(cand.element);
    }
    insertElementBefore(cand.element, $placeholder);
}

[timbell]

Sorry, the above is badly broken - please don't use it!. Detaching/reattaching the original element rather than hiding it during dragging does seem to work well:

In $moveUpdate:

// svOriginal.addClass('ng-hide');
svOriginal.detach();

And in afterRevert:

var $parent = $placeholder.parent();
$placeholder.remove();
$helper.remove();
// $original.removeClass('ng-hide');
var $before = $parent.children().eq(index);
if ($before.length) {
    $parent[0].insertBefore($original[0], $before[0]);
}
else {
    $parent.append($original);
}