craft.js icon indicating copy to clipboard operation
craft.js copied to clipboard

Issue with drag shadow

Open mayank-ms088 opened this issue 3 years ago • 7 comments

I have cloned the repo and run the landing example. And this is dragging the user components like in the video. Can anyone help me to sort this out? I want to use this library in my project.

OS: ubuntu 20.04 LTS

see the video

https://user-images.githubusercontent.com/50516542/121763382-41b76d00-cb59-11eb-85ea-d989eff1a9e5.mp4

mayank-ms088 avatar Jun 12 '21 03:06 mayank-ms088

Can't reproduce on my machine, might be OS related perhaps. @ankri @matdru Any ideas? 🤔

prevwong avatar Jun 12 '21 07:06 prevwong

YES I have checked it.

  • It is Working Correctly on Mac OS.

  • In Windows Drag shadow is not there but while dragging, the component is not at the cursor position. It is dragging from some other position. (SEE THE ATTACHED SS)

  • In Linux As I have mentioned above, having an error with drag shadow.

SS-1

SS-2

mayank-ms088 avatar Jun 14 '21 02:06 mayank-ms088

Can anyone help me to sort this please?

mayank-ms088 avatar Jun 17 '21 13:06 mayank-ms088

Having the same issue here.

I see no shadow for craft.js.org, but I can confirm that there is a shadow when I run it locally (even in production). I also running a Linux distribution (Arch btw). There is a white translucent background for every component when you drag them.

Really weird because craft.js.org should work exactly the same as when you run it locally in production..

iojcde avatar Jun 21 '21 02:06 iojcde

Having same issue as @JcdeA

on ubuntu20.04, https://craft.js.org/examples/basic/ works properly run locally, chrome and firefox both have shadows when drag, and on firefox further, the component is not at the cursor position

laofaKB avatar Jul 02 '21 07:07 laofaKB

Sadly this is an issue with Chrome that has been open for 6 years now 😔

A suggested solution would be to not render the container which has width: 100% and height: 100% but render only the shadow itself.

Beware that in the next branch we have support for multi-select.

ankri avatar Jul 02 '21 14:07 ankri

change the container to

e.dataTransfer.setDragImage(shadow, 0, 0);

fix the problem on ubuntu20.4, not tested on other systems and not sure how much impact on other scenes.

zwg-zero avatar Jul 11 '21 09:07 zwg-zero