Positioning Custom Drag and Drop Hints

Environment

Description

How can I change the default position of the custom drag hint of the Kendo UI for Angular Drag and Drop utility?

Solution

When utilizing a custom hint element that is smaller than the drag target, it may appear offset from the mouse pointer, requiring manual position adjustments. To customize the default hint position:

1. Handle the onDrag event of the element with the kendoDragTarget directive applied.

   Copy Code<!-- Considering the drag element is bigger that the hint. -->
   <div kendoDragTarget (onDrag)="onDrag($event)" [hint]="{hintTemplate: hint}">
       Drag Me!
   </div>
   
   <!-- Considering the hint element has smaller dimensions. -->
   <ng-template #hint >
       <div> DRAG HINT <div>
   </ng-template>

2. Prevent the default onDrag event behavior and use the Renderer2 to set the top and left CSS properties of the hint element to the clientX and clientY values.

   Copy Codeconstructor(private r: Renderer2) {}
   
   public onDrag(e: DragTargetDragEvent): void {
       e.preventDefault();
       this.topValue = `${e.dragEvent.clientY}px`;
       this.leftValue = `${e.dragEvent.clientX}px`;
   
       this.r.setStyle(e.hintElement, 'top', this.topValue);
       this.r.setStyle(e.hintElement, 'left', this.leftValue);
   }