Sending Pictures Source From HTML palettezone to be dragged into myDiagram

GoJS
1

Hello Everyone,

I would like to make a put images from HTML on the palettezone then the user can drag and drop it inside myDiagram, So the user has the variety of many images and he can drag and drop any of them. here is part of the code

// *********************************************************
// Second, set up a GoJS Diagram
// *********************************************************

var $ = go.GraphObject.make;  // for conciseness in defining templates

myDiagram = $(go.Diagram, "myDiagram",  // create a Diagram for the DIV HTML element
              {
                initialContentAlignment: go.Spot.Center,
                "undoManager.isEnabled": true
              });  // center the content
window.PIXELRATIO = myDiagram.computePixelRatio(); // constant needed to determine mouse coordinates on the canvas

// define a simple Node template
myDiagram.nodeTemplate =
  $(go.Node, "Auto",
    { locationSpot: go.Spot.Center },
    new go.Binding('location'),
    $(go.Picture,
        // the picture has a red background, only visible when there is no source set
        // or when the image is partially transparent
        {  margin: 10, width: 30, height: 30, background: "red" },
        // Picture.source is data bound to the "source" attribute of model data:
        new go.Binding("source"),
    $(go.TextBlock,
      { margin: 3, font: "bold 16px sans-serif", width: 140, textAlign: 'center' },
      // TextBlock.text is bound to Node.data.key
      new go.Binding("text"))
  );

// but use the default Link template, by not setting Diagram.linkTemplate

// create the model data that will be represented by Nodes and Links
myDiagram.model = new go.GraphLinksModel(
[
  { text: "Alpha", source: "https://lh3.ggpht.com/kuskOgZvjr5tefLkXUqGxt3wxFy1IUIqHEowuZfi8a6Qd9XeASiXulDDMhcq1yKGGII=w300" },
  { text: "Beta", source: "https://lh3.ggpht.com/kuskOgZvjr5tefLkXUqGxt3wxFy1IUIqHEowuZfi8a6Qd9XeASiXulDDMhcq1yKGGII=w300" },
  { text: "Gamma", source: "https://lh3.ggpht.com/kuskOgZvjr5tefLkXUqGxt3wxFy1IUIqHEowuZfi8a6Qd9XeASiXulDDMhcq1yKGGII=w300" },
  { text: "Delta", source: "https://lh3.ggpht.com/kuskOgZvjr5tefLkXUqGxt3wxFy1IUIqHEowuZfi8a6Qd9XeASiXulDDMhcq1yKGGII=w300" }
],
[ ]);

}

<div style="width:100%; white-space:nowrap;">
<span style="display: inline-block; vertical-align: top; padding: 5px;">
  <div class="palettezone">
    <div class="draggable" draggable="true"><img src="https://lh3.ggpht.com/kuskOgZvjr5tefLkXUqGxt3wxFy1IUIqHEowuZfi8a6Qd9XeASiXulDDMhcq1yKGGII=w300" width="60px"></div>
    <div class="draggable" draggable="true">Tea</div>
    <div class="draggable" draggable="true">Tea</div>
  </div>
</span>
<span style="display: inline-block; vertical-align: top; padding: 5px; margin-left: 10px;">
  <div class="dropzone" id="myDiagram" style="border: solid 1px black; width:400px; height:400px;"></div>
</span>

so i want to take this src of the image in the HTML to send it when am dragging the image to inside

2

Have you seen these samples?

3

Hello Walter,

thanks for you reply, this partially solve my problem…
now i have a problem putting the Image source dynamically in the addNodeData, i need it dynamic, Any Suggestions… am Placing the Image tags in the HTML file

    myDiagram.startTransaction('new node');
    myDiagram.model.addNodeData({
      location: point,
      text: dragged.textContent,
      source: dragged.src ,  /* When i replace it with the image src its working,
      i need it dynamic any suggestions ? */ 
    });
    myDiagram.commitTransaction('new node');

Thank you for your Help!