Drag on regular Raphael objects is translated as pan

[Nitrodist]

So, both events are firing in this case. I drag a square and it moves the square but it also pans the entire screen. Not a great case. Is there a way to disable this functionality when it knows that there's another drag event occurring or to register it in panZoom to not trigger it?

[escobar5]

Is there a way in Raphael to check if a specific element is handling the drag event? I can't find it.

[Nitrodist]

I don't think so. I'm not totally familiar with it. What I did to get around it was to call panzoom.disable when I'm moving the object and enable it when it's done dragging. It's a hack on my side, but it works...

[Nitrodist]

Although, can't you hook into the call to the Raphael object's .drag? That way you can set your own function to be called when it starts dragging/moving/stops and then pass onto the correct start/move/drag callback...

Let me know if you think if this is the correct approach.

[escobar5]

I'm going to check if that's possible. But I'm seeing a strange behavior when the paper is zoomed in, even if I disable the drag of raphael pan & zoom, the drag moves a larger distance than the mouse movement.

[Nitrodist]

That's because dx, dy is the mouse's distance from its origin, not its distance from the point on the canvas. So if you're zoomed in 2x, then you move your mouse 10 pixels, then you've really moved it 10 pixels, so the element you're dragging will go twice as far (to you), but if you were zoomed out, it would be same distance.

You have to compensate for the zoom level that you're at with regards to dx, dy (some kind of modifier). I haven't delved into your zoomlevel stuff (no idea what level 0, 1, 2, 3, .etc, really mean), but this is the correct approach, I think.

[meecect]

any hint on how to account for the zoomlevel? I tried simply dividing my 'dx' and 'dy' by the zoom level but that did not quite work. It's close, but now when zoomed in the object move a little 'less' that they should. Without the factor, they move more than they should.

Not sure what the issue is.

[Siyfion]

I'm experiencing similar issues to those described here, I'm using the Raphael FreeTransform library (https://github.com/ElbertF/Raphael.FreeTransform) which is really awesome, but when I drag an element around it's also panning all over the place. I don't know if there's a better way to fix this other than the mentioned 'hack' that just disables and enables panZoom when the element drag event fires?

[Gubbi]

By using panZoom.enable() and panZoom.disable() in the Raphael object event handlers, this can be prevented.

[yahyaKacem]

One possible way to fix this (in the same plunker I provided for the negative value issue) is to disable the pan on the objects so the pan can only be applied to the canvas.

[vipulsaluja]

Fix to this problem is to update dx and dy before applying translation to element

dx = dx - dx * panZoom.getCurrentZoom * zoomStep;
dy = dy - dy * panZoom.getCurrentZoom * zoomStep;

After this, dragging element in zoom works perfectly.

[achtan]

@Siyfion hi i have same issue with pan-zoom + Free-transform... how exactly did you fixed it?