ng2-dnd: (onDropSuccess) does not fire everywhere in dnd-droppable

If I drop an element into a droppable container, the (onDropSuccess) event should fire. However in my example

<div dnd-sortable-container [sortableData]="orders" [dropZones]="['orders']"
     dnd-droppable [allowDrop]="allowDropFunction()"
     class="col-lg-6 box">
    <div *ngFor="let o of orders; let i=index"
         dnd-draggable [dragEnabled]="true" [dragData]="o"
         dnd-sortable [sortableIndex]="i" (onDropSuccess)="updateLeft(o)"> <!-- (onDropSuccess)="updateLeft($event)" -->
        {{o.key}} {{o._id}}
    </div>
</div>

<div class="col-lg-6">
    <div *ngFor="let dep of departments" class="box">
    <div dnd-sortable-container [dropZones]="['orders']" [sortableData]="dep.nodes"
         dnd-droppable [allowDrop]="allowDropFunction()">
        <div>
            <div dnd-draggable [dragEnabled]="false" [dragData]=""
                 dnd-sortable [sortableIndex]="-1" (onDropSuccess)="updateRight(dep, {})" style="background: red" >
                {{dep.name}}
            </div>
            <div *ngFor="let o of dep.nodes; let i=index"
                 dnd-draggable [dragEnabled]="true" [dragData]="o"
                 dnd-sortable [sortableIndex]="i" (onDropSuccess)="updateRight(dep, o)">
                {{o.key}}
            </div>
        </div>
    </div>
    </div>
</div>

it is possible, to drop an element, without receiving the event.

Reproduction:

1. take any draggable element
2. when it is inside the container, meaning the element is already listed in the right container, move your cursor over the head of the container you want to drop it in (red field)
3. drop the element

Result: the element is in the container, but no event is fired!

Note that the head

            <div dnd-draggable [dragEnabled]="false" [dragData]=""
                 dnd-sortable [sortableIndex]="-1" (onDropSuccess)="updateRight(dep, {})" >
                {{dep.name}}
            </div>

being like this is, my try, to overcome this problem.

What I also tried it without the dnd directives:

         <div>
            <div style="background: red" >
                {{dep.name}}
            </div>
            <div *ngFor="let o of dep.nodes; let i=index"
                 dnd-draggable [dragEnabled]="true" [dragData]="o"
                 dnd-sortable [sortableIndex]="i" (onDropSuccess)="updateRight(dep, o)">
                {{o.key}}
            </div>
        </div>

---

or outside of the div

<div dnd-sortable-container [dropZones]="['orders']" [sortableData]="dep.nodes"
         dnd-droppable [allowDrop]="allowDropFunction()">
         <div style="background: red" >
                {{dep.name}}
            </div>
        <div>
            <div *ngFor="let o of dep.nodes; let i=index"
                 dnd-draggable [dragEnabled]="true" [dragData]="o"
                 dnd-sortable [sortableIndex]="i" (onDropSuccess)="updateRight(dep, o)">
                {{o.key}}
            </div>
        </div>
    </div>

---

or even outside the dnd-droppable container
<div class="col-lg-6">
    <div *ngFor="let dep of departments" class="box">
    <div style="background: red" >
                {{dep.name}}
            </div>
    <div dnd-sortable-container [dropZones]="['orders']" [sortableData]="dep.nodes"
         dnd-droppable [allowDrop]="allowDropFunction()">
        <div>
            <div *ngFor="let o of dep.nodes; let i=index"
                 dnd-draggable [dragEnabled]="true" [dragData]="o"
                 dnd-sortable [sortableIndex]="i" (onDropSuccess)="updateRight(dep, o)">
                {{o.key}}
            </div>
        </div>
    </div>
    </div>
</div>

which does NOT work at all, which makes sense. But I’m not anymore able to pull something into an empty dnd-droppable container

---

I’m using: Angular version: angular 2.0.0-rc.4 Browser:

• Chrome Version 52.0.2743.116 (64-bit)
• Firefox 47.0

Example: PLNKR I could not find a way to make this work. Am I doing something wrong? If so what?