angularprimeng

The list item is disappearing while using primeng drag/drop

I'm using the Primeng picklist, when I'm trying to drag an item from list to another, the item disappear until the item dropped.

<p-dialog [(visible)]="showMarker"  (onHide)="hideDialogChild()" [contentStyle]="{'overflow':'visible'}" header="'Marker List'" [modal]="true">
    <p-pickList [source]="sourceMarkers" [target]="targetMarkers" sourceHeader="Available markers" targetHeader="Associated Markers" dragdrop="true"
        [responsive]="true" [sourceStyle]="{'height':'300px'}" [targetStyle]="{'height':'300px'}" filterBy="markername"
        sourceFilterPlaceholder="Search by name" targetFilterPlaceholder="Search by name">
        <ng-template let-marker pTemplate="item">
            <div class="product-list-detail">
                <h5 class="mb-2">{{markername}}</h5>
            </div>
        </ng-template>
    </p-pickList>

  
</p-dialog>

this link is a snapshot video to show the current behavior pick list issue

Here is a running code on stackblitze: Code snippet for picker issue

Solution

  • It's a z-index CSS issue. Please add the below style to style.css.

    .p-picklist-item:not(.cdk-drag-disabled) {
  cursor: move;
  z-index: 1130 !important;
}

    Forked Stackblitz