Drag&Drop from other components into Diagram

[Alex B]

Hi

I have Vite+Vue3+Pinia project.
I have a question: Is it possible to arrange support drag&drop elements not only from symbol pallete to diargam?
I tried to use ListBoxComponent with allowDragAndDrop=true, but when I was trying to drop elements, I got 

Uncaught TypeError: e.target.className.indexOf is not a function

    at Sortable2._this.onDrag (sortable.js:72:77)

My plan is to drop some element from list and init node in diagram programmatically delending on dropped item element data.
If that's possible, could you please provide some sample?

[Aravind Ravi]

Hi Alex,

We could not able to drag and drop the list box component item to diagram. Instead of using ListBox you can use the Treeview component. From treeview component, you can able to drag and drop the node from treeview to diagram. Once you dropped the treeview node in diagram, the treeview nodeDragStop event get triggered. In the event get set the event args offsetX and offsetY position to the node offsetX and offsetY position. So that node gets dropped at mouse position. Please refer the below code example

function nodeDragStop(args: any): void {

    let targetEle: any = closest(args.target, '.e-droppable');

    targetEle = targetEle ? targetEle : args.target;

    // check an target as diagram

    if (targetEle.classList.contains("e-diagram")) {

      let data: any = args.draggedNodeData.text;

      //add an node at runtime

      diagram.add({

        id: data + randomId(), width: 100, height: 100, offsetX: args.event.offsetX, offsetY: args.event.offsetY,

        annotations: [{ content: data, }]

      });

// Remove the treeview node after add the node in diagram

      args.clonedNode.remove();

    }

  }

We have attached a video demonstration of how drag and drop from treeview to diagram get worked. Please find the video in the below link

Video: https://www.syncfusion.com/downloads/support/forum/176326/ze/Treeview-Diagram1489635824

For more information about how to create treeview , please refer to the below UG link

UG Link: https://ej2.syncfusion.com/vue/documentation/treeview/getting-started/

Regards

Aravind Ravi

[Alex B]

Hi Aravind

Thanks for code sample, that worked for me.

[Aravind Ravi]

Hi Alex,

Most welcome.

Regards

Aravind Ravi