Switch node in drag mode

[allahyar]

I needed a method to switch a node during a drag operation, as I'm implementing node duplication via Alt+Drag. Is there a solution?

[bcakmakoglu]

Alas, no, you cannot switch the "active" element mid-drag.

In your case I'd simply bind my own @dragstart on my custom node wrapper (not onNodeDragStart) and check if a modifier key was pressed before the interaction and if it was create a drag image of a "ghost node" as the duplicated node.

Roughly sth like this

const altKeyPressed = useKeyPress('Alt');

function onDragStart() {
	// ...
}

// CustomNode.vue
<div style="position: relative">
	<div v-if="altKeyPressed" style="position: absolute; inset: 0" @dragstart="onDragStart" />
	...
</div>

the concrete implementation + creation of a "ghost" node is up to you - either add a node using addNodes and replace it with an actual one on dragend or use a DragImage placeholder styled to your liking.

[allahyar]

Thanks for the guidance, I've tried various methods, but drag events are not called in custom nodes wrapper.

https://codesandbox.io/p/devbox/quizzical-shamir-zn98rk?file=%2Fsrc%2Fcomponents%2FColorSelectorNode.vue%3A39%2C1