Multiple source positions (Drag & Drop example)

[ThomasSEGALEN]

Hello,

I used the Drag & Drop example available in the documentation.
However, I can't get my element to have two "source" positions (Position.Top / Position.Bottom).
At the moment, I'm doing it like this (it allows only one source position) :

const node = {
      id: nodeId,
      type: draggedType.value,
      position,
      label: `[${nodeId}]`,
      sourcePosition: Position.Top
}

Could you explain to me how I can have two source positions while retaining the same logic as the example.

Thanks

[bcakmakoglu]

You need to use a custom node for that.

Check the custom node example on how to implement it.

Basically use the Handle component, set a unique id for the handle, define what type of handle it is and the position <Handle :id="uniqueHandleId" type="source" :position="Position.Top">.

To target the handle with an edge you will have to use sourceHandle / targetHandle to specify which handle the edge belongs to.

{
	id: 'e1a-2',
	source: '1',
	target: '2',
	sourceHandle: 'handle-a'
}