dndPlaceholder usage about ngx-drag-drop

[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 👍