Svelte Native Drag + Drop

Simple lightweight utility for handling drag and drop events with W3C API Drag + Drop → DEMO

Usage

npm install --save svelte-native-drag-drop
yarn add svelte-native-drag-drop

The store binds to DOM elements, so its important to call .clear() with onDestroy:

<script>
	import { onMount, onDestroy } from 'svelte';
	import dragdrop from './index.js'

	onDestroy( async () => {
		dragdrop.clear('shared-group')
	})

</script>

There are two core functions: binding to drag areas, binding to drop areas:

<script>
	import { onMount, onDestroy } from 'svelte';
	import dragdrop from './index.js'

	onMount( async () => {
		dragdrop.addDragArea( 'shared-group', handleEl, dragEl )
		dragdrop.addDropArea( 'shared-group', dropEl )
	})

	onDestroy( async () => {
		dragdrop.clear('shared-group')
	})

	let dropEl, dragEl, handleEl

</script>

<div bind:this={dropEl}>
	drop area
</div>

<div bind:this={dragEl}>
	<div bind:this={handleEl}>drag handle</div>
	<span>drag element</span>
</div>

The store holds two references to the currently active DOM elements, source and destination:

{#if $dragdrop['shared-group'].source == dragEl} dragged! {/if}
{#if $dragdrop['shared-group'].destination == dropEl} dropping! {/if}

Callbacks can be passed to the addDropArea function:

<script>
	import { onMount, onDestroy } from 'svelte';
	import dragdrop from './index.js'

	onMount( async () => {

		const callbacks = {
			dragover: ( e ) => console.log('currently dragging over:', e.target),
			dragleave: ( e ) => console.log('dragging left:', e.target),
			drop: ( e ) => console.log('successfully dropped, source:', e.source, 'destination:', e.destination)
		}

		dragdrop.addDragArea( 'shared-group', handleEl, dragEl )
		dragdrop.addDropArea( 'shared-group', dropEl, callbacks )
	})
	
	onDestroy( async () => {
		dragdrop.clear('shared-group')
	})

	let dropEl, dragEl, handleEl

</script>

<div bind:this={dropEl}>
	drop area
</div>

<div bind:this={dragEl}>
	<div bind:this={handleEl}>drag handle</div>
	<span>drag element</span>
</div>

<div>
	status:
	{#if $dragdrop['shared-group'].source == dragEl} dragged! {/if}
	{#if $dragdrop['shared-group'].destination == dropEl} dropping! {/if}
</div>