Drag and drop fails in Firefox about wireflow HOT 11 CLOSED

Confirmed, same issue here.

• Left-click fails the majority of the time, just ends up selecting instead
• Right-click and drag works fine, but obviously not the intended experience

from wireflow.

Adding the following styling to the sidebar with devtools seems to solve it:
.sidebar { user-select: none }

Should I open an PR for this, or are you already on it?

from wireflow.

@timvisee If you could, please do.
Not capable of properly testing this right now

from wireflow.

@timvisee, thanks for the PR. Do you think it will work properly on chrome after this change you added?

It does. Tested it with Chromium 85.0.4183.121 and Firefox Nightly 83.0a1 (2020-09-28).

Live PR demo at: https://deploy-preview-51--wireflow-app.netlify.app/

from wireflow.

Looking around in more detail, it seems this issue has been around for quite a while and it's clearly an issue with GGEditor, or maybe the way that the ItemPanel sidebar is set up. Hopefully there's enough detail below for someone to fix it up.

This doesn't happen in the main container because the <canvas> element has user-select: none applied. Looking at the code in more detail, it seems you're using the ItemPanel.Item component via gg-editor which doesn't allow for style overrides in the version you're using in 2.x. But, there was a change in January that exposes style changes via props for v3.0.0:

alibaba/GGEditor@871e311#diff-82fc4868025d971505f59ada992fe28eL203-L209

I would say that the best thing to do would be to upgrade GGEditor, but you're on 2.x and 3.0.0 introduces breaking changes.

Without upgrading, you can apply the style to the Card component of FlowItemPanel.index which will allow the drag-and-drop process to start, but it requires an extra click to drop the item. When I apply the change locally, drag and drop works - but when I release the mouse button, the component is still transparent with dotted outline and requires another click to release.

Good luck!

from wireflow.

hah, I spent nearly 5 minutes trying to figure out if I was missing some obscure UI that actually did things before I thought to try wireflow in a different browser 😅

from wireflow.

Adding the following styling to the sidebar with devtools seems to solve it:
.sidebar { user-select: none }

from wireflow.

Did some testing in #51. Doesn't seem to properly solve it. It stops the selection issue, but still doesn't allow dragging items in the canvas. Dragging the white space on the right side of the items works fine though.

from wireflow.

The items in the sidebar currently have draggable="false" set:

<img draggable="false">

which doesn't seem to work properly in Firefox. Explicitly cancelling the dragging with JavaScript seems to work:

<img draggable="false" onmousedown="if (event.preventDefault) event.preventDefault()">

Edit: not liking this, seems like a hack. Not sure where this would fit in the source either, can't find anything for 'draggable'.

from wireflow.

Great. Setting the CSS property pointer-events: none; on the sidebar image prevents dragging the image, not requiring the JavaScript snippet mentioned above.

This seems to fix Wireflow in Firefox.

Will update the PR with this change and submit it.

from wireflow.

@nagytech, previously @arifulbgt4 said there was some breaking changes in version 3 and that's why he didn't use that. If we can use the latest version, it would be best. Do you have a suggestion how to use the version 3 without breaking the whole app?

@timvisee, thanks for the PR. Do you think it will work properly on chrome after this change you added?

from wireflow.