angularprimengangular-cdk-drag-dropangular-dragdrop

PrimeNG Order list - set handle item

I am using PrimeNG Order List with drag and drop functionality enabled.

<p-orderList [value]="form" [dragdrop]="true">
  <ng-template let-form pTemplate="item">
    <input
       pInputText
       type="text"
       />
  </ng-template>
</p-orderList>

Drag and drop is working fine but when user want's to select and copy value from input field, he can't because drag&drop is starting. Is it possible to define drag&drop handle or somehow remove input from it?

Solution

  • You need to stop the "mousedown" event propagation on your input field. This will allow that input to be interacted with normally.

    <input
   pInputText
   type="text"
   (mousedown)="$event.stopPropagation()"
   />