diff --git a/packages/core/src/components/Nodes/NodeWrapper.ts b/packages/core/src/components/Nodes/NodeWrapper.ts index b9901f2b..fc1471cc 100644 --- a/packages/core/src/components/Nodes/NodeWrapper.ts +++ b/packages/core/src/components/Nodes/NodeWrapper.ts @@ -62,6 +62,7 @@ const NodeWrapper = defineComponent({ el: nodeElement, disabled: () => !props.draggable, selectable: () => props.selectable, + dragHandle: () => node.value.dragHandle, onStart(args) { emit.dragStart({ ...args, intersections: getIntersectingNodes(node.value) }) }, diff --git a/packages/core/src/composables/useDrag.ts b/packages/core/src/composables/useDrag.ts index 766d1128..d8be1098 100644 --- a/packages/core/src/composables/useDrag.ts +++ b/packages/core/src/composables/useDrag.ts @@ -15,6 +15,7 @@ interface UseDragParams { disabled?: MaybeComputedRef selectable?: MaybeComputedRef id?: string + dragHandle?: MaybeComputedRef } function useDrag(params: UseDragParams) { @@ -39,7 +40,7 @@ function useDrag(params: UseDragParams) { emits, } = $(useVueFlow()) - const { onStart, onDrag, onStop, el, disabled, id, selectable } = params + const { onStart, onDrag, onStop, el, disabled, id, selectable, dragHandle } = params const dragging = ref(false) @@ -209,11 +210,13 @@ function useDrag(params: UseDragParams) { }) .filter((event: D3DragEvent['sourceEvent']) => { const target = event.target as HTMLDivElement + const unrefDragHandle = resolveUnref(dragHandle) + return ( !event.button && (!noDragClassName || (!hasSelector(target, `.${noDragClassName}`, nodeEl) && - (!node?.dragHandle || hasSelector(target, node.dragHandle, nodeEl)))) + (!unrefDragHandle || hasSelector(target, unrefDragHandle, nodeEl)))) ) })