Drag drop operation with Common

[Manuel]

Hello 

I'm trying to perform a Drag&Drop operation with @Syncfusion/Common following the documentation:  Drag and drop in Angular Common control | Syncfusion

My purpose is to load a list of charts and put in an accordion, and then the user will drag into a dashboard layout.

Every chart can be inserted multiple tymes, so I'm settimg {clone:true}

The problem is when I try to drag, the control is not moving but appears a label with "Draggable".

How can I fix this?

Attachment: src_3aed877b.zip

[Vijay Ravi]

Hi Manuel,

We've checked your sample. When you set the clone property to true, the drag element won't automatically copy to where you drop it. Instead, you'll need to manually make a copy of the dragged element and place it in target location. You can do this by returning the copied element from a function called helper.

Refer to the below code-snippet:

const dragHelper = (args: { sender: Event, element: HTMLElement }) => {

      let element: HTMLElement = args.element.cloneNode(true) as HTMLElement;

document.getElementById('myContent')?.appendChild(element);

      return element;

}

 

new Draggable(document.getElementById("ElementToDrag_1") as HTMLElement, { clone: true, helper: dragHelper });

new Draggable(document.getElementById("ElementToDrag_2") as HTMLElement, { clone: true, helper: dragHelper });

new Draggable(document.getElementById("ElementToDrag_3") as HTMLElement, { clone: true, helper: dragHelper });

For your reference, we have attached the working sample below.

Regards,

Vijay

Attachment: angulardraggable_ad38ecf2_5742f2b.zip