Here you go, view in source page:-
function init() {
if (window.goSamples) goSamples(); // init for these samples – you don’t need to call this
// *********************************************************
// First, set up the infrastructure to do HTML drag-and-drop
// *********************************************************
var dragged = null; // A reference to the element currently being dragged
// highlight stationary nodes during an external drag-and-drop into a Diagram
function highlight(node) { // may be null
var oldskips = myDiagram.skipsUndoManager;
myDiagram.skipsUndoManager = true;
myDiagram.startTransaction("highlight");
if (node !== null) {
myDiagram.highlight(node);
} else {
myDiagram.clearHighlighteds();
}
myDiagram.commitTransaction("highlight");
myDiagram.skipsUndoManager = oldskips;
}
// This event should only fire on the drag targets.
// Instead of finding every drag target,
// we can add the event to the document and disregard
// all elements that are not of class "draggable"
document.addEventListener("dragstart", function(event) {
if (event.target.className !== "draggable") return;
// Some data must be set to allow drag
event.dataTransfer.setData("text", "");
// store a reference to the dragged element
dragged = event.target;
// Objects during drag will have a red border
event.target.style.border = "2px solid red";
}, false);
// This event resets styles after a drag has completed (successfully or not)
document.addEventListener("dragend", function(event) {
// reset the border of the dragged element
// dragged.style.border = "";
highlight(null);
}, false);
// Next, events intended for the drop target - the Diagram div
var div = document.getElementById("myDiagramDiv");
div.addEventListener("dragenter", function(event) {
// Here you could also set effects on the Diagram,
// such as changing the background color to indicate an acceptable drop zone
// Requirement in some browsers, such as Internet Explorer
event.preventDefault();
}, false);
div.addEventListener("dragover", function(event) {
// We call preventDefault to allow a drop
// But on divs that already contain an element,
// we want to disallow dropping
if (this === myDiagram.div) {
var can = event.target;
var pixelratio = window.PIXELRATIO;
// if the target is not the canvas, we may have trouble, so just quit:
if (!(can instanceof HTMLCanvasElement)) return;
var bbox = can.getBoundingClientRect();
var bbw = bbox.width;
if (bbw === 0) bbw = 0.001;
var bbh = bbox.height;
if (bbh === 0) bbh = 0.001;
var mx = event.clientX - bbox.left * ((can.width / pixelratio) / bbw);
var my = event.clientY - bbox.top * ((can.height / pixelratio) / bbh);
var point = myDiagram.transformViewToDoc(new go.Point(mx, my));
var curnode = myDiagram.findPartAt(point, true);
if (curnode instanceof go.Node) {
highlight(curnode);
} else {
highlight(null);
}
}
if (event.target.className === "dropzone") {
// Disallow a drop by returning before a call to preventDefault:
return;
}
// Allow a drop on everything else
event.preventDefault();
}, false);
div.addEventListener("dragleave", function(event) {
// reset background of potential drop target
if (event.target.className == "dropzone") {
event.target.style.background = "";
}
highlight(null);
}, false);
// handle the user option for removing dragged items from the Palette
var remove = document.getElementById('remove');
div.addEventListener("drop", function(event) {
// prevent default action
// (open as link for some elements in some browsers)
event.preventDefault();
// Dragging onto a Diagram
if (this === myDiagram.div) {
var can = event.target;
var pixelratio = window.PIXELRATIO;
// if the target is not the canvas, we may have trouble, so just quit:
if (!(can instanceof HTMLCanvasElement)) return;
var bbox = can.getBoundingClientRect();
var bbw = bbox.width;
if (bbw === 0) bbw = 0.001;
var bbh = bbox.height;
if (bbh === 0) bbh = 0.001;
var mx = event.clientX - bbox.left * ((can.width/pixelratio) / bbw);
var my = event.clientY - bbox.top * ((can.height/pixelratio) / bbh);
var point = myDiagram.transformViewToDoc(new go.Point(mx, my));
myDiagram.startTransaction('new node');
if(dragged.textContent === "End Call")
color = "red";
else
color = "lightyellow";
myDiagram.model.addNodeData({
location: point,
text: dragged.textContent,
color: color
});
/* if(dragged.textContent === "Address Book")
myDiagram.div.innerHTML = ""; */
myDiagram.commitTransaction('new node');
alert('dragged.src-' + dragged.src);
// remove dragged element from its old location
if (remove.checked) dragged.parentNode.removeChild(dragged);
}
// If we were using drag data, we could get it here, ie:
// var data = event.dataTransfer.getData('text');
}, false);
// *********************************************************
// Second, set up a GoJS Diagram
// *********************************************************
var $ = go.GraphObject.make; // for conciseness in defining templates
myDiagram = $(go.Diagram, "myDiagramDiv", // create a Diagram for the DIV HTML element
{
initialContentAlignment: go.Spot.Center,
"undoManager.isEnabled": true
});
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.Shape, "Rectangle",
{ fill: 'white' },
// Shape.fill is bound to Node.data.color
new go.Binding("fill", "color"),
// this binding changes the Shape.fill when Node.isHighlighted changes value
new go.Binding("fill", "isHighlighted", function(h, shape) {
if (h) return "red";
var c = shape.part.data.color;
return c ? c : "white";
}).ofObject()), // binding source is Node.isHighlighted
$(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(
[
],
[ ]);
}
Address Book
Download
Upload
Call
End Call
Remove HTML item after drag