search

Shopify / draggable

The JavaScript Drag & Drop library your grandparents warned you about.
https://shopify.github.io/draggable
MIT License
18k stars 1.09k forks source link

Catch click event on draggable element #511

Open RatebHabbab opened 3 years ago

RatebHabbab commented 3 years ago

Like implementing draggable overriding click events defined on draggable element, Is there any way to keep the click event?

zjffun commented 3 years ago

Draggable element can addEventListener https://codepen.io/1010543618/pen/VwWxwME .

If you want more detailed control, you can use it in combination with other libraries, for example Hammer.js .

RatebHabbab commented 3 years ago

It's not working when using Draggable.Swappable

zjffun commented 3 years ago

I tried Draggable.Swappable and it worked. Maybe you want to listen mousedown, it can be triggered as long as the mouse is pressed. https://codepen.io/1010543618/pen/VwWxwME

WX20210920-184153@2x
RatebHabbab commented 3 years ago

I finally realized the difference, you are using version @1.0.0-beta.11 while I'm using @1.0.0-beta.12, It's working fine on .11 but not working on .12

RatebHabbab commented 3 years ago

I can't downgrade to .11 because I'm using the drag:stopped event that exist in .12 version

zjffun commented 3 years ago

I reproduced this bug. It seems that because the mouseup is not triggered on the original element. The temporary solution I can think of is to determine whether to trigger the click when mouseup https://codepen.io/1010543618/pen/VwWxwME

zjffun commented 3 years ago

The motivation of clone original element and hide it was described in #242