Turn off dragging on node when interacting with input controls.

[Pitchlab]

I would like to enable users to interact with controls on a node, e.g. a slider, turn dial, or other controls. Currently, dragging on the control will make the node move.

I can turn off the dragging using e.g. e.stopPropagation() but then the control won't work either. Case in point: using <input type="range"/>

How can I make this happen? And would it not make more sense to have the controls be able to respond to their own mouse events without interference?

Current behavior: when on slider control (<input type="range"/>) the node drags, not the slider Expected behavior: when I drag the area on the node OUTSIDE controls, the node drags, when on the slider, I can manipulate the slider.

Any help welcome!

[creadicted]

@Pitchlab in what environment are you working in? So what is the framework you are using?

[a7md0]

I need to achieve the exact same behavior, something like detaching the controls area from the drag event

I'm using the Angular render plugin, but I guess this is something related to this library

[hasanaydemir]

I'm working on same issue. I try to make image crop operation on node but it's not possible :( Node always moving with cropper. I'm using Angular render plugin.

[hasanaydemir]

I try something then it's worked for me. I'm using ngx-image-cropper on my project. Node stop dragging when I cropped image.

image-cropper is control class name, image-roi-select is node component class name. document.querySelector('.image-cropper').addEventListener('pointerdown', event => event.stopPropagation()) document.querySelector('.image-roi-select').addEventListener('pointerdown', event => event.defaultPrevented)

[ghost]

Got the same issue. I wish there was a way to exclude some classes or selectors from the drag event.

[Plaximo]

I try something then it's worked for me. I'm using ngx-image-cropper on my project. Node stop dragging when I cropped image.

image-cropper is control class name, image-roi-select is node component class name. document.querySelector('.image-cropper').addEventListener('pointerdown', event => event.stopPropagation()) document.querySelector('.image-roi-select').addEventListener('pointerdown', event => event.defaultPrevented)

I used this idea for my angular app. With angular I used HostListener for the events and it's working. We could also create a directive for this event to use on different components.

@HostListener('pointerdown', ["$event"]) mouseenter($event: MouseEvent) { $event.stopPropagation() }

@HostListener('pointerup', ["$event"]) mouseexit($event: MouseEvent) { $event.defaultPrevented; }

[rete-js[bot]]

This issue is stale because it has been open 30 days with no activity. Remove stale label or comment or this will be closed in 10 days.