Handles and filters

[pavitrakumar78]

Hi,

I am trying to use jQuery UI's draggable inside body (or a div) which is given as a parameter to panzoom(),
when I try to drag (the draggable elements), the whole div moves - is there a way to filter specific elements (inside the parent div) from triggering pan/zoom?

[anvaka]

Hello,

That's a very good question.

I'm not familiar with jQuery UI draggable. Does it listen in capture phase? If yes, then you can just call e.stopPropagation() and that should probably work.

Otherwise, I have this same question in the code:

panzoom/index.js

Lines 377 to 380 in 78571d3

	// TODO: Should I allow to cancel this?
	domController.applyTransform(transform);
	triggerEvent('transform')

[pavitrakumar78]

jQuery UI has 3 events - start(), stop() and drag() that you can define for the draggable jQuery element.
Example: https://jqueryui.com/draggable/#events
So, from what I understand from your suggestion, you mean I should call e.stopPropagation() inside the start() function? I tried that and that did not work, but please correct me if I misinterpreted your suggestion.
What I initially had in mind was similar to what jQuery offers - for example, here they filter the drag event from happening by restricting the handles to only a part of the div, so in a similar way, If I have multiple nested divs inside a parent div, and I call panzoom with the parent div (to be panned and zoomed) as the parameter along with handles (or filters) as input. Something like this:

var area = document.getElementById('testarea')
panzoom(area,{
    filter: ['.childdiv1','.childdiv2']
})

So, to sum up, if I click/drag/do any mouse event on divs with either childdiv1 class or childdiv2 class, the pan/zoom on the entire parent div will not be executed.