akserg
(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:
- take any draggable element
- 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)
- 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?
Whilst onDropSuccess is not firing, and nor is onDragSuccess, onDragEnd is being fired and I have successfully used this event to get the functionality I needed. Its not perfect, but it does work.
If issue is still actual then I have found a reason of this behavior - events firing is broken by dnd directives conflict. Do not use dnd-draggable, dnd-droppable, and dnd-sortable on same element, because they shares inner state and alloDrop property is reset to false.
So just insert some internal DIV if you want to get element draggable an droppable like this:
<div *ngFor="let hub of listHubs()" class="hub"
dnd-draggable [dragData]="hub">
<div class="drop-zone" dnd-droppable (onDropSuccess)="onHubDropped($event, hub)">
<span class="name">{{ hub.name }}</span>
<span class="clip-name">{{ hub.clipName }}</span>
</div>
@jacobrabjohns solution almost worked for me, however, I have multiple lists and when dragging from one list to another and the dropping is outside the list my model gets updated but no callback is being triggered.
I have the same problem as @norenma. I move an item from one list to the other, the item appears in the list. While the mouse button is still down I move past the container and release. The model contains the correct elements, but no event is fired, so I can't fire an output event of my own.
May be it is an intentional feature, but I can see that onDropSuccess is not fired even if we have two simple sortable containers and dragging dropping elements to second list from first. You can see it live in plunker
Second thing is that as mentioned by @PleasantD here is it expected behaviour to retain the moved element in second sortable container even if user has stopped dragging outside of that container? You can see, in the plunker, this behaviour creates trouble when we have multiple containers where user can drop items. Further, it maintains the order within the first sortable container even if user moves out of the container while releasing the mouse button. Sorry for diverging from the topic, but if this is actually a feature or intended behaviour, please direct me to the doc for the same.
Plunker: https://plnkr.co/edit/dbYWEOm8ywuLmUmfIQ5e
I tried both onDragEnd and onDropSuccess and none of them got fired:
<table class="sjs-table" dnd-sortable-container [sortableData]="currentImageSources" (onDropSuccess)="console.log('DROP SUCCESS')" (onDragEnd)="alert('dragEnd!')">
<tr *ngFor="let val of currentImageSources; let i = index" dnd-sortable [sortableIndex]="i" style="height: 80px; border: solid; border-color: #1d1e1f;" >
<td style="height: auto">
<img [src]="val" style="height: 72px">
</td>
</tr>
</table>
After trying different setups, I realized It works when the event handlers are placed in the elements to be dragged and not in the container itself. So if we have a table with dnd-sortable-container and we sort the rows (tr), then the row is the one catching the events onDropSuccess onDragEnd, etc...
@rcfrias Thanks for info. However, it is not working for me even if I put the event handlers on sortable elements. I have updated the plunk to have onDropSuccess attached to both target sortable container and sortable divs. But event is not being fired.
has anyone solved this? onDropSuccess for dnd-sortable-container event not fire
Im also having this problem. It does not fire for md-input-container
Try to give a dropzone attribute for every container like [dropZones]="['categorySortZone']"
