Question: How to disable on:click when dragging

[NikoKS]

I have a button that can be dragged around. After the button finished dragging, it would trigger the on:click. How do I disable this?

Any help is appreciated. Thank you!

[houtan-rocky]

@NikoKS

Here's a workaround. Depending on the framework you're using, you can define a flag that holds dragging and set it to true inside your onDrag callback and set it back to false on drag end, so you can still use the usual onclick functionality

here is an example in svelte

		<div
			use:draggable={{
				cancel: '.cancel',
				bounds: document.body,
				onDrag: ({ offsetX, offsetY }) => {
					progressX.set(offsetX);
					progressY.set(offsetY);
					dragging.set(true);
				},
				onDragEnd: ({}) => {
					setTimeout(() => dragging.set(false), 300);
				},
			}}
			on:click={() => {
				if(get(dragging) === false) {
					console.log('click');
				}
			}}
		>
		Content
		</div>

<script>
	let dragging = writable(false);
</script>