https://github.com/lewis-wow/svelte-sortable

https://github.com/lewis-wow/svelte-sortable

Last synced: about 1 month ago
JSON representation

• Host: GitHub
• URL: https://github.com/lewis-wow/svelte-sortable
• Owner: lewis-wow
• Created: 2023-02-19T19:31:14.000Z (almost 2 years ago)
• Default Branch: master
• Last Pushed: 2023-02-20T12:22:06.000Z (almost 2 years ago)
• Last Synced: 2024-11-11T02:37:59.655Z (about 1 month ago)
• Language: Svelte
• Size: 29.3 KB
• Stars: 1
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# Svelte Sortlist

## Installation

```bash

npm i svelte-sortlist

```

List must be `let`, it cannot be `const` if you bind it. Cause inside `SortList` component it will change.

```svelte

  import SortList from 'svelte-sortlist'

  let items = [

    { id: 1, value: 'A' },

    { id: 2, value: 'B' },

    { id: 3, value: 'C' },

  ]

  
{index} -> {item.value}


```

## Customize element

You can customize `SortList` element with element prop. It cannot be component.

```svelte

  

    

      
{item.value}

    

  


```

## Customize class

You can specify class of SortList. So you can use it with Tailwind.

```svelte

  
{item.value}


```

## Reorder event

With bindings you don't need this event, cause your items will be synced thanks to bind. But if you want for example sync it with backend server, you can use the reorder event and request the server on each reorder.

```svelte

 console.log(e.detail.source, e.detail.target)}>

  
{item.value}


```

## If is over the item

You can for example apply styles on element that you are hovering over.

```svelte

  
{isOver ? 'over' : 'not over'} - {item.value}


```

## Rest props

`SortList` can be extended by any props. For example `id="my-id"`.