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 >
                <h5 >{{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

CodePudding user response：

Thank you for the stackblitz, its 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