This entire div is a connection target. When you drop a connection on this div, a new Endpoint is created and the connection is attached to it. The new Endpoint has a dynamic anchor with several possible locations.

This entire div is a connection source. It is not draggable, but you can drag a connection from it; when the connection is established a new source endpoint is assigned, located at the point from which you dragged the connection.

This div is a connection target. When you drop a connection on it, a new Endpoint is created and the connection is attached to it. The new Endpoint is located exactly where on the div you let go of the mouse button.

This entire div is a connection target. When you drop a connection on this div, a new Endpoint is created and the connection is attached to it. The new Endpoint is snapped to a 2x3 grid.

The blue square in this div is a connection source. You can drag connections from it. When a connection is established, the Endpoint is moved to the main div, using a dynamic anchor that has a position at each corner.