Nested drag and drop components

[Ruben]

Hi,

I'm looking to create a low-code style view where users can:

• Add a step or condition
• Alter the sequence of steps or conditions by drag and dropping the component in the desired sequence (Move - drag and drop)
• For conditions I would like to be able to:
• Add steps and condition
• Alter the sequence of steps or conditions by drag and dropping the component in the desired sequence (Move - drag and drop)
• Refer to existings steps by drag and dropping the step in the condition (Link - Drag and drop)

(see attachement)

To achieve this I would ideally have a listView which contained custom components (steps and conditions) as  list items. The condition (list item) would allow the user to drop steps (list items) in predefined areas (THEN or ELSE)

I have been looking at the following syncfusion components but I'm lost which solution will fit my purpose best:

• Common - drag and drop (https://ej2.syncfusion.com/angular/documentation/common/drag-and-drop)
• ListView (https://ej2.syncfusion.com/angular/documentation/listview/how-to/drag-and-drop-list-items)
  (https://ej2.syncfusion.com/angular/documentation/listview/how-to/customize-listview-as-chat-window)
• Grid (https://ej2.syncfusion.com/angular/documentation/grid/row/row-drag-and-drop)
• Listbox (https://ej2.syncfusion.com/angular/documentation/list-box/drag-and-drop)

Any help on how to achieve this would be appreciated!

Thank you in advance!

Attachment: NestedDD_75cac8ac.zip

[LeoLavanya Dhanaraj]

Hi Ruben,

Greetings from Syncfusion support.

From your shared details, we understand that you want to perform a drag-and-drop action based on a particular condition. Similar like, we have documented the TreeView sample in the Angular platform. Here, we have restricted the files(tree node) drag-and-drop action within the folders only. Check out the below link, to know more about the TreeView drag and drop action.

Restrict drag-and-drop : https://ej2.syncfusion.com/angular/documentation/treeview/how-to/restrict-the-drag-and-drop-for-particular-tree-nodes

TreeView drag-and-drop : https://ej2.syncfusion.com/angular/documentation/treeview/drag-and-drop

Check out the shared documentation sample at your end and let us know if the provided sample is suitable for your requirement. Please get back to us if you need any further assistance.

Regards,

Leo Lavanya Dhanaraj