svelte-section-list

This is a headless Svelte npm package that provides drag-and-drop functionality for managing items and sections. It offers a flexible and customizable solution for implementing drag-and-drop interactions in your Svelte applications.

Update

Now much faster for IOS - by using ontouch over draggable

Demo

Have a play with it here: https://main--transcendent-begonia-7a3d6f.netlify.app/

Being headless means you have 100% control over the styles:

Getting started 👨‍🏫

To install the library, you can use either npm or yarn:

npm install svelte-section-list

or

yarn add @ svelte-section-list

Import

import { DraggableSections } from 'svelte-section-list';

types

You can also import some types to help you with the data structure.

import type { ItemType, SectionType } from 'svelte-section-list';

ItemType

The ItemType interface represents the structure of an item in the section list.

interface ItemType {
	id: number;
	name: string;
}

SectionType

The SectionType interface represents the structure of a section in the section list.

interface SectionType {
	title: string;
	items: ItemType[];
}

Props

items (required)

An array of ItemType objects representing the initial items within the item list to be displayed.

example

const items: ItemType[] = [
	{ id: 1, name: 'Item 1' },
	{ id: 2, name: 'Item 2' },
	{ id: 3, name: 'Item 3' }
];

sections (required)

An array of SectionType objects representing the sections to be displayed.

example

const sections: SectionType[] = [
	{ title: 'Section 1', items: [item1, item2] },
	{ title: 'Section 2', items: [] }
];

ItemComponent (optional)

An optional prop to provide a custom component used to render individual items. The component should accept an item prop of type ItemType. For example the default is:

<script lang="ts">
	export let item: ItemType;
</script>

<div class={'item'}>
	{item && item.name}
</div>

<style>
	.item {
		border: 1px solid black;
		padding: 10px;
		margin: 10px;
		cursor: move;
	}
</style>

SectionComponent (optional)

An optional prop to provide a custom component used to render individual sections. The component should accept a section prop of type SectionType. For example the default is:

<script lang="ts">
	export let section: SectionType;
</script>

<div class="section">
	<h2>{section && section.title}</h2>
	<slot />
</div>

<style>
	.section {
		display: inline-block;
		border: 1px solid black;
		padding: 10px;
		margin: 10px;
		min-width: 200px;
		min-height: 100px;
	}
</style>

ItemContainerComponent (Optional)

An optional prop to provide a custom container component for organizing and displaying items. The component should include a element to allow the rendering of individual items. For example:

<div class="container">
	<h2>Items</h2>
	<slot />
</div>

<style>
	.container {
		min-height: 100px;
	}
</style>

SectionContainerComponent (Optional)

An optional prop to provide a custom container component for organizing and displaying sections. The component should include a element to allow the rendering of individual sections. For example:

<div>
	<h2>Sections</h2>
	<slot />
</div>

Usage

Basic usage

<script lang="ts">
	import { DraggableSections } from 'svelte-section-list';
	import type { ItemType } from 'svelte-section-list';

	let items: ItemType[] = [
		{ id: 1, name: 'Wash sink' },
		{ id: 2, name: 'Brush teeth' },
		{ id: 3, name: 'Flush toilet' }
	];

	let sections = [
		{ title: 'Todo', items: [] },
		{ title: 'Done', items: [] }
	];
</script>

<div class="container">
	<DraggableSections {items} bind:sections />
</div>

Custom usage

<script>
	import { DraggableSections } from 'svelte-section-list';
	import CustomItemComponent from './CustomItemComponent.svelte';
	import CustomSectionComponent from './CustomSectionComponent.svelte';
	import CustomItemContainer from './CustomItemContainer.svelte';
	import CustomSectionContainer from './CustomSectionContainer.svelte';

	const items = [
		{ id: 1, name: 'Item 1' },
		{ id: 2, name: 'Item 2' },
		{ id: 3, name: 'Item 3' }
	];

	const sections = [
		{
			title: 'Section 1',
			items: [
				{ id: 4, name: 'Item 4' },
				{ id: 5, name: 'Item 5' }
			]
		},
		{ title: 'Section 2', items: [] }
	];
</script>

<DraggableSections
	{items}
	{sections}
	ItemComponent={CustomItemComponent}
	SectionComponent={CustomSectionComponent}
	ItemContainerComponent={CustomItemContainer}
	SectionContainerComponent={CustomSectionContainer}
/>

Retrieving Values

To retrieve the current state of the items and sections after drag-and-drop interactions, you can bind to the necessary values using the bind:items and/or bind:sections syntax. For example:

<DraggableSections {items} bind:sections />

Examples

An example usage can be seen in the route directory: https://github.com/TIKramer/svelte-section-list/tree/main/src/routes

A live example can be found here: https://main--transcendent-begonia-7a3d6f.netlify.app/

Contributions

Contributions to the svelte-section-list library are welcome! If you would like to contribute, please follow these guidelines:

-Fork the repository and clone it to your local machine. -Install the dependencies by running npm install. -Create a new branch for your feature or bug fix: git checkout -b my-feature. -Make your changes and ensure that the code follows the project's coding conventions. -Commit your changes and push them to your forked repository. -Submit a pull request with a clear description of your changes and the problem they solve.

If it all works and looks good, I'll merge it in :)

Thank you for your interest in contributing to svelte-section-list! Your contributions are greatly appreciated.