1. Home
  2. Forum
  3. Vue
  4. Dragging custom nodes on the diagram

Dragging custom nodes on the diagram

Hi ! 

Is there a way to drag custom nodes to the diagram (without using the palette) ? 

For instance I have this div containing svg flags on the left of my diagram. If I want to drag one of the flags to the diagram so that it behaves like a drag from the palette, how should I set the datatransfer event on dragstart ? 


Flags.jpg

Many thanks !

K


5 Replies 1 reply marked as answer
VG Vivisa Ganesan Syncfusion Team November 15, 2023 01:28 PM UTC

Hi,

We wiil validate and update you with more details on November 16,2023.


Regards,

Vivisa


VG Vivisa Ganesan Syncfusion Team November 16, 2023 03:38 PM UTC

Hi,

We have created a sample using the Syncfusion TreeView component to render custom nodes instead of utilizing a palette. Please review the code snippet below and confirm if it meets your requirements:

Sample:https://stackblitz.com/edit/s4v2xs-aezvdl?file=src%2FApp.vue

Regards,

Vivisa



Marked as answer
KA Kamal November 18, 2023 01:40 AM UTC

Thank you very much, but I do not want to drag from the treeview or from the palette. 

My drag event has to start from a normal HTML element. Is it possible ?

Many thanks 



VG Vivisa Ganesan Syncfusion Team November 20, 2023 03:54 PM UTC

Hi,

We will check the possibilities for dragging and dropping the HTML element in the diagram using draggable component without using symbol palette and treeview. We will validate and update with more details on 22 November ,2023

Regards,

Vivisa



SJ Sivaranjith Jeyabalan Syncfusion Team November 21, 2023 11:31 AM UTC

Hi,

The html element which rendered in normal div other than symbol palette or tree view component will not be detected in diagram dragEnter and drop event where we convert the element into actual diagram node. So, it is recommended to use either symbol palette or tree view to render html elements which you need to drag and drop into diagram.

Regards,

Sivaranjith


Loader.
Up arrow icon