How to restrict dragging nodes by an axis?

[ayZagen]

I would like to have a node to be dragged only vertically or horizontally. I tried playing with events but it didn't work. In d3 we could override drag behavior inside 'drag' event but it seems it does not work here. here is a node example i tried:

  {
    id: 'id1',
    label: 'drag only vertivally',
    position: { x: 100, y: 100 },
    events: {
      drag({ event }) {
        if (event.movementX !== 0) {
          event.preventDefault() //no effect
        }
      },
    },
    style: { backgroundColor: 'rgba(16, 185, 129, 0.5)', width: '600px', height: '200px' },
  } as Node,

[bcakmakoglu]

There's no option to restrict axis of movement.
You could do this by handling node changes yourself something like this

onNodesChange((changes) => {
  const positionChanges = changes.filter((change) => change.type === 'position') as NodePositionChange[]

  if (positionChanges.length) {
    applyNodeChanges(
      positionChanges.map((change) => {
        return {
          ...change,
          position: {
            y: change.from.y,
            x: change.position.x,
          },
        }
      }),
    )
  } else {
    applyNodeChanges(changes)
  }
})

<VueFlow v-model="elements" :apply-default="false" />

Here's an example

[ayZagen]

Thanks, I got the idea but the positionChanges contains incorrect values for nested nodes. position contains relative path to parent but from contains the root position.

[bcakmakoglu]

For nested nodes you'd have to overwrite the computedPosition