Drag and Drop all over the component

GoJS
1

I need drag an item from anywhere in the react component and drop into gojs flowchart kind of thing, the draggable item only contains the name of the element and while droping that into gojs I want a node with corresponding structure to that name

2

Does this sample help you? HTML Drag and Drop, and external Clipboard pasting

3

it displays on the base of node template’s default color and shape but I want unique shape and color, how to inject those data or objectData in that html element

      <div class="draggable" draggable="true">Water</div>
      <div class="draggable" draggable="true">Coffee</div>
      <div class="draggable" draggable="true">Tea</div>
4

Do you see the call to the Model.addNodeData method? The object that you add can have whatever properties you like, and the Node template that you define can use as many of those properties as you like to parameterize the Shapes and TextBlocks and Pictures and Panels in your template.
https://gojs.net/latest/intro/dataBinding.html

5

ya ya but my doubt is
for eg, water is an html canvas element in that code, now we are dragged that droped into gojs graph then how do I fetch the node data with some keyword say ‘water’

if(type==="water") getCustomNode();
=================================
 private getCustomNode(){
        return {
            key:'',
            figure:'RoundedRectangle',
            text:"Water",
            margin:new go.Margin(20,10,10,10),
            fill:'#bfeff5',
        };
    }
=================================================
//May be as you said
if(type==="water") 
diagram.model.addNodeData(getCustomNode());

like this

6

That depends on what data you associated at the “dragstart” event.

By the way, don’t set the key of the node data object to an empty string. The model will automatically choose a unique key.

Do you have data Bindings for each of the four properties that you wanted to control in your node data?

7

yep, I have
I created a component to return each of them
Now I have an idea about the dragstart event ,let me check and update you

thanks for your quick reply…