Svelte Drag Drop

This component is designed to effortlessly showcase a dynamic list of items, primarily images, allowing users to easily reorder them via intuitive drag-and-drop functionality.

Utilizing this component is a breeze—simply set the 'items' prop, and you're good to go!

:rocket: Installation

You can install the svelte-drag-drop component from npm by running the following command:

$ npm install @kuiper/svelte-drag-drop

https://github.com/kofkuiper/svelte-drag-drop/assets/104291370/eed53dd0-fd17-48ae-ae3c-db2827b0bb96

:fire: Usage

Basic usage example

<script lang="ts">
	import DragDrop from '@kuiper/svelte-drag-drop';
	let items = [
		'https://images.unsplash.com/photo-1700730025710-58ff304c1c8b?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=MnwxfDB8MXxyYW5kb218MHx8fHx8fHx8MTcwMTc4MTEyMA&ixlib=rb-4.0.3&q=80&w=1080',
        ...
	];
</script>


<DragDrop bind:items/>

Handle events example

<script lang="ts">
	import DragDrop from '@kuiper/svelte-drag-drop';
	let items = [
		'https://images.unsplash.com/photo-1700730025710-58ff304c1c8b?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=MnwxfDB8MXxyYW5kb218MHx8fHx8fHx8MTcwMTc4MTEyMA&ixlib=rb-4.0.3&q=80&w=1080',
        ...
	];
	type EventType = Event & { dataTransfer?: any; target?: any };

	// Handle Drag & Drop events
	function onDragStart(e: EventType) {
		console.log('onDragStart: ', e);
	}
	function onDrag(e: EventType) {
		console.log('onDrag: ', e);
	}
	function onDragEnd(e: EventType) {
		console.log('onDragEnd: ', e);
	}
	function onDragEnter(e: EventType) {
		console.log('onDragEnter: ', e);
	}
	function onDragOver(e: EventType) {
		console.log('onDragOver: ', e);
	}
	function onDragLeave(e: EventType) {
		console.log('onDragLeave: ', e);
	}
	function onDrop(e: EventType) {
		console.log('onDrop: ', e);
	}
</script>

<DragDrop
	bind:items
	on:onDragStart={(e) => onDragStart(e.detail)}
	on:onDrag={(e) => onDrag(e.detail)}
	on:onDragEnd={(e) => onDragEnd(e.detail)}
	on:onDragEnter={(e) => onDragEnter(e.detail)}
	on:onDragOver={(e) => onDragOver(e.detail)}
	on:onDragLeave={(e) => onDragLeave(e.detail)}
	on:onDrop={(e) => onDrop(e.detail)}
/>

:tada: Props

• items: images list (required)
• (optional)
  • onDragStart: The user starts dragging an element or text selection.
  • onDrag: An element or text selection is being dragged (every 350ms).
  • onDragEnd: A drag operation is being ended (by releasing a mouse button or hitting the escape key).
  • onDragEnter: A dragged element or text selection enters a valid drop target.
  • onDragOver: An element or text selection is being dragged over a valid drop target (every 350ms).
  • onDragLeave: A dragged element or text selection leaves a valid drop target.
  • onDrop: An element is dropped on a valid drop target.