dndPlaceholder usage

[fperezgaliana]

Hi! I'm trying your library and I have a doubt about how to use the 'dndPlaceholder' property of the drop zones. I've created a demo app and one of the dropzones looks like:

    <td [dndDropzone]="['SERVICE', 'ADDRESS']"
         [dndPlaceholder]="ph1"
         (dndDragover)="onDragover($event)"
         (dndDrop)="onDrop($event)"> 

         <div class="list-group" id="ph1">
           <a href="#" class="list-group-item list-group-item-action"
             *ngFor="let item of itemDest1; let i=index"
             [dndDraggable]="item.data"
             [dndEffectAllowed]="item.effectAllowed"
             [dndDisableIf]="item.disable"
             (dndStart)="onDragStart($event)"
             (dndCopied)="onDraggableCopied($event)"
             (dndLinked)="onDraggableLinked($event)"
             (dndMoved)="onDraggableMoved($event)"
             (dndCanceled)="onDragCanceled($event)"
             (dndEnd)="onDragEnd($event)"
             (click)="selectObj($event, i)">
             {{item.data.nombre}}
           </a>
         </div>
    </td>

When I drag something on the drop zone, I receive a big Javascript error, and when I remove the 'dndPlaceholder' line, it works perfectly. I want to specify that the placeholder is the element with id 'ph1' (the Bootstrap list-group div below). How can I do it?

Thanks a lot, your library is very handy. Cheers!

[reppners]

Hi :)

To reference a dndPlaceholder mark the element with a template reference variable #ph1

         <div class="list-group" id="ph1" #ph1>
           <a href="#" class="list-group-item list-group-item-action"
             *ngFor="let item of itemDest1; let i=index"
             [dndDraggable]="item.data"
             [dndEffectAllowed]="item.effectAllowed"
             [dndDisableIf]="item.disable"
             (dndStart)="onDragStart($event)"
             (dndCopied)="onDraggableCopied($event)"
             (dndLinked)="onDraggableLinked($event)"
             (dndMoved)="onDraggableMoved($event)"
             (dndCanceled)="onDragCanceled($event)"
             (dndEnd)="onDragEnd($event)"
             (click)="selectObj($event, i)">
             {{item.data.nombre}}
           </a>
         </div>

See the angular docs about template ref vars https://angular.io/guide/template-syntax#ref-vars

Also the placeholder should be a dedicated element which does not contain draggables itself, so your markup should be more like

  <td [dndDropzone]="['SERVICE', 'ADDRESS']"
         [dndPlaceholder]="ph1"
         (dndDragover)="onDragover($event)"
         (dndDrop)="onDrop($event)">

        <div #ph1>
            PLACEHOLDER CONTENT HERE
        </div>

         <div class="list-group" id="ph1">
           <a href="#" class="list-group-item list-group-item-action"
             *ngFor="let item of itemDest1; let i=index"
             [dndDraggable]="item.data"
             [dndEffectAllowed]="item.effectAllowed"
             [dndDisableIf]="item.disable"
             (dndStart)="onDragStart($event)"
             (dndCopied)="onDraggableCopied($event)"
             (dndLinked)="onDraggableLinked($event)"
             (dndMoved)="onDraggableMoved($event)"
             (dndCanceled)="onDragCanceled($event)"
             (dndEnd)="onDragEnd($event)"
             (click)="selectObj($event, i)">
             {{item.data.nombre}}
           </a>
         </div>
    </td>

You can apply styling and content on the placeholder as you like but it does not serve any other purpose than being a visual element which indicates the drop index. Therefore it makes sense to have it look similar to the draggables contained in the dropzone.

I'm also thinking about having dynamic placeholders by using the currently dragged element as a placeholder. If you'd like such functionality please let me know.

[fperezgaliana]

Hi! Thank you very much for your fast response! I added the template var to the placeholder div and it worked like a charm! Now that I've read the documentation more in detail, I realized that you specified it in the placeholder definition... (sorry about that :))

Regarding the dynamic placeholders, it would be a useful feature but, at the moment, I'm happy with the behaviour of the library.

Best regards,

[reppners]

Glad I could help 👍