Elements within the <panzoom> with <Draggable>

[armikhael]

Hi I worked for the elements within the PanZoom with draggable, and the change made ​​in the branch testing-drag-drop.

I have a problem adding draggable the items I can not prevent the Panzoom move when selected, how could I do to move the item is independent of PanZoom but still within.

[mvindahl]

Hi armikael,
Sorry, I'm awfully sorry for not having seen your notfication sooner. Did you find a solution for your problem?
Regards,
/Martin

[armikhael]

hello mvindahl

If you can solve my problem.

The objects within the Pan-Zoom are also agrege Draggable and one drag- drop.

https://github.com/armikhael/angular-pan-zoom/tree/testing-drag-drop

test.dev.html

[mvindahl]

Hi Carlos,
As far as I can see, you can drag items onto the list which is contained in the panzoom element. However, when you try to drag them away, the whole thing pans instead .. right?
Off the top of my head I don't have a solution for this. I would argue that from a UX viewpoint it would be confusing if pan and drag gestures are mixed in this way. It would be hard for the user to foresee exactly what would happen.
For that reason I would suggest not using the panzoom widget in this case. Instead, an old fashioned div with scrollbars would do the trick.
Best regards,
/Martin

[equus71]

Hi armikael,

I have done the app solving a similar problem. I had some kind of a map (panzoomable with angular-pan-zoom) and some markers on it which were draggable.

The main part is to prevent the angular-pan-zoom to get the event that drag have started ("mousedown" event).
I have made custom directive for my draggable elements basing on the example from the angular's docs (https://docs.angularjs.org/guide/compiler).
To the function handling "mousedown" event I had to just add "event.stopPropagation();".
This way you can have draggable elements within the angular-pan-zoom.

All the best

[mvindahl]

Thanks for the input equus71. Stopping the mouse events from propagating to the panzoom directive seems like the correct solution. Since this is not really an issue with angular-pan-zoom I'll take the liberty of closing the issue.