Click and drag inside jQuery sortable div change in 1.34.0

I have a web app that uses a jQuery sortable grid of container divs each of which has a plotly.js chart in it. The users can select how many and which charts are displayed in the grid, and also drag and drop the charts around to re-order the grid to their preference.

This used to work really well with plotly - when the user clicked and dragged inside the plotly chart, it would draw the zoom box, or scale the axes as expected, when the user clicked and dragged outside of those areas, the whole sortable div would move including the chart allowing it to be interactively reordered within the grid.

However, with release 1.34.0 clicking and dragging inside the plotly chart now does both at the same time - draw the zoom box, and also move the entire div containing the chart.

I made 2 jsFiddle examples to illustrate, with just the barebones sortable functionality:

1.33.1 https://jsfiddle.net/2hL23y46/
1.34.0 https://jsfiddle.net/has5qhff/

If you try to click and drag inside the chart area (when the cursor changes to a +) you can see the difference in behavior. Clicking outside the chart still behaves as expected in both cases.

Is this new behavior in 1.34 intentional ? And if so, is there a way to get the old behavior back with some change I can make to my code, perhaps overriding some default event handlers ?

Any help or suggestions are greatly appreciated !

Thanks for the report.

This wasn’t intentional at all. I suspect this PR might be the culprit.

Hi, etienne,

Looks like this is still an issue with 1.35.2

I am not completely sure how to read the last reply - what do you mean by “this PR” being a culprit ? Is this something you guys might fix eventually, or do I need to find a workaround on my end to make it work again ?

Thanks !

Oops I forgot to paste the link: https://github.com/plotly/plotly.js/pull/2296

Yes, but it won’t be a high priority for us unfortunately. We’ll gladly accept PRs that attempt to fix this issue though.