search

vaheqelyan / svelte-grid

A responsive, draggable and resizable grid layout, for Svelte.
https://svelte-grid.now.sh/
MIT License
948 stars 57 forks source link

How to differentiate between a click and a drag #73

Closed admolofto closed 3 years ago

admolofto commented 3 years ago

Under certain circumstances, I have my draggable items working as buttons (i.e. when the user clicks on an item, an event fires). Unfortunately, whenever I finish dragging an item, the onClick function of the item will fire.

What is the best way to prevent this from happening? How do I tell Grid that the user is dragging an item, not clicking it.

React-grid has an 'onDrag' function that fires after the user has dragged an item. The method they recommend is to set a timeout that doesn't allow the functions to fire if an item was just dragged. Is there something similar I can implement here?

Again, thanks for all your hard work!

admolofto commented 3 years ago

Solved it myself. In case anybody is looking this up, I just added mousedown and mouseup listeners to the items and checked the mouse x and y coords after mouseup to see if there was any change.

vaheqelyan commented 3 years ago

also look at this one https://github.com/vaheqelyan/svelte-grid/issues/25