How to get the palette's information from a node being dragged in Vue Diagram?

This article explains how to retrieve the palette information of a node while it is being dragged in the Syncfusion® Vue Diagram component. In a diagram, users can drag and drop nodes or connectors from the symbol palette onto the diagram surface. During this drag-and-drop process, certain events, such as the dragEnter event, are triggered. These events can be leveraged to implement custom actions, including retrieving the palette information of the dragged node or connector.

The dragEnter event is specifically called when a node or connector is dragged from the symbol palette into the diagram area. By handling this event, we can iterate through the palette to find the selected symbol and retrieve palette information such as the palette ID, title, and symbols. In the sample below, we log the palette ID to the console during the dragEnter event.

function dragEnter(args) {
 // Iterate through each palette in the source's palettes array
 for (const palette of (args.source).palettes) {
   // Retrieve the symbols array from the current palette
   const symbols = palette.symbols;
   // Get the ID of the currently selected symbol being dragged
   const selectedSymbolId = (args.source).selectedSymbols.id;
   // Find the symbol in the palette's symbols array that matches the selected symbol ID
   const foundSymbol = symbols.find(symbol => symbol.id === selectedSymbolId);
   // If a matching symbol is found, log the palette id to the console
   if (foundSymbol) {
     console.log(palette.properties);
   }
 }
};

Please refer to the working sample for reference.
Sample

Conclusion
I hope you enjoyed learning how to get the palette’s information from a node being dragged in Vue Diagram.

You can refer to our Vue Diagram feature tour page to know about its other groundbreaking feature representations and documentation, and how to quickly get started for configuration specifications. You can also explore our Vue Diagram example to understand how to create and manipulate data.
For current customers, you can check out our components from the License and Downloads page. If you are new to Syncfusion®, you can try our 30-day free trial to check out our other controls.
If you have any queries or require clarifications, please let us know in the comments section below. You can also contact us through our support forums, Direct-Trac, or feedback portal. We are always happy to assist you!