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.