The "Palette" in this sample is not a Palette (or GoJS component) at all. It is a collection of HTML elements with draggable attributes using the HTML Drag and Drop API.

This sample lets you drag these HTML elements onto the Diagram to create GoJS nodes. As the mouse passes over stationary nodes or links in the Diagram, they are highlighted.

If a drop happens (based on the mouse point) on an existing node, a new link is also drawn from that existing node to the newly dropped node. If a drop happens on an existing link, the link is reconnected to go to the newly dropped node, and a new link is added to go from that newly dropped node to whatever node the link had been connected to before.

This sample also demonstrates allowing external clipboard pasting, by modifying myDiagram.commandHandler.doKeyDown to do nothing but allow the event to bubble, and then defining a "paste" event on the document. So the user can select some text, either on the page or in some other app, and then a paste in the diagram will create a new node using that text.

GoJS Features in this sample


A Palette is a subclass of Diagram that is used to display a number of Parts that can be dragged into the diagram that is being modified by the user. The initialization of a Palette is just like the initialization of any Diagram. Like Diagrams, you can have more than one Palette on the page at the same time.

More information can be found in the GoJS Intro.

Related samples

HTML Interaction

GoJS Diagrams can be used alongside other HTML elements in a webapp. For custom Text Editors, Context Menus, and ToolTips, which are invoked and hidden via GoJS tool operations, it is best to use the HTMLInfo class.

More information can be found in the GoJS Intro.

Related samples