jQuery drag-and-drop capability

Hello,
can I make Nodes with different Shapes (not only “Circle”) using jQuery drag-and-drop capability?
Like in this example https://gojs.net/latest/samples/jQueryDragDrop.html - can I make the fisrt element was the Circle, the Second “SQUARE”, and like this…
How can I connect HTML’s item “id” with different Nodes or Shapes?

The appearance of nodes is entirely controlled by you when you define the node templates used by the Diagram. In that sample the Shapes are all of figure “Ellipse”, as you can see in the implementation on that page.

But you can data bind the Shape.figure property so that the data control what figure the shape uses. HTML Interaction demonstrates that.

Or you can use different templates. Logic Circuit demonstrates that.

Yes, I know how to connect template and palette (in the palette I will create array with “figure”), but if I doun’t use palette (but use jQuery drag-and-drop capability https://gojs.net/latest/samples/jQueryDragDrop.html), where should I save "figure: “Hexagon” and "figure: “Rectangle”? The diagram shuld get the item’s “li” id, how can I do that?

If you look at the implementation of that jQuery Drag-and-Drop sample, you’ll see where the drop function adds a node data object to the Diagram’s Model. You can initialize that object’s properties with whatever you need in your app.