https://github.com/alfred-skyblue/svelte-draggable-plus

svelte drag and drop sorting component
https://github.com/alfred-skyblue/svelte-draggable-plus

draggable svelte svelte-draggable svelte-sort

Last synced: 10 days ago
JSON representation

svelte drag and drop sorting component

• Host: GitHub
• URL: https://github.com/alfred-skyblue/svelte-draggable-plus
• Owner: Alfred-Skyblue
• License: mit
• Created: 2023-10-18T09:19:00.000Z (about 1 year ago)
• Default Branch: main
• Last Pushed: 2023-12-21T17:09:53.000Z (11 months ago)
• Last Synced: 2024-10-12T09:11:45.846Z (27 days ago)
• Topics: draggable, svelte, svelte-draggable, svelte-sort
• Language: Svelte
• Homepage: https://alfred-skyblue.github.io/svelte-draggable-plus/
• Size: 1.15 MB
• Stars: 10
• Watchers: 2
• Forks: 0
• Open Issues: 1
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# svelte-draggable-plus

`svelte-draggable-plus` is a draggable sorting component for the `Svelte` framework, based on `Sortablejs`. If you want to learn more about `Sortablejs`, you can check the [Sortablejs official website](https://github.com/SortableJS/Sortable).

## Install

```bash

npm install svelte-draggable-plus sortablejs

```

If your project uses typescript, you can install `@types/sortablejs` to get type support.

```bash

npm install @types/sortablejs -D

```

## Usage

```html

	import { Draggable } from 'svelte-draggable-plus'

	let list = [

		{

			name: 'Joao',

			id: '1'

		},

		{

			name: 'Jean',

			id: '2'

		},

		{

			name: 'Johanna',

			id: '3'

		},

		{

			name: 'Juan',

			id: '4'

		}

	]

	let options = {

		group: 'shared',

		animation: 150,

		onEnd: (event) => {

			console.log(event)

		}

	}

	
{item.name}


```