A Svelte wrapper for the Sortable.js library
npm install @sonderbase/svelte-sortablejssvelte-sortablejs
Unofficial Svelte package for the SortableJS library.
See a live demo on Netlify.
1. Install with npm, pnpm, or yarn.
npm i -D @sonderbase/svelte-sortablejs
2. Import SortableList from package.
import { SortableList } from '@sonderbase/svelte-sortablejs';
3. Use the SortableList component in your svelte file.
``Svelte`
List Item 1
List Item 2
List Item 3
Look in src/routes/index.svelte to see Svelte implementations of the SortableJS examples.
Below is a list explaining the SortableList component parameters. All parameters are optional. Check out the official SortableJS github for more in depth information on the parameters.
---
#### multiDragClass option
Type: string
Default Value: null
Add a multiDrag class. Automatically mounts the multiDrag Plugin, sets it to true and sets fallbackTolerance to 3.
---
#### swapClass option
Type: string
Default Value: null
Add a swap class. Automatically mounts the swap Plugin, sets it to true.
---
#### group option
Type: string | GroupOptions
Default Value:
"name" OR { name: "...", pull: [true, false, 'clone', array], put: [true, false, array] }
---
#### sort option
Type: boolean
Default Value: true
Sorting inside list
---
#### disabled option
Type: boolean
Default Value: false
Disables the sortable if set to true.
---
#### store option
Type: undefined
Default Value:
---
#### handle option
Type: string
Default Value:
Drag handle selector within list items
---
#### swapThreshold option
Type: number
Default Value: 1
Threshold of the swap zone. Must be between 0 and 1.
---
#### invertSwap option
Type: boolean
Default Value: false
Will always use inverted swap zone if set to true.
---
#### invertedSwapThreshold option
Type: number
Default Value:
Threshold of the inverted swap zone (will be set to swapThreshold value by default).
---
#### removeCloneOnHide option
Type: boolean
Default Value: true
Remove the clone element when it is not showing, rather than just hiding it
---
#### ghostClass option
Type: string
Default Value: "sortable-ghost"
Class name for the drop placeholder.
---
#### chosenClass option
Type: string
Default Value: "sortable-chosen"
Class name for the chosen item.
---
#### dragClass option
Type: string
Default Value: "sortable-drag"
Class name for the dragging item.
---
#### ignore option
Type: string
Default Value: "a; img"
Elements to ignore
---
#### filter option
Type: string | Function
Default Value:
Selectors that do not lead to dragging (String or Function)
---
#### preventOnFilter option
Type: boolean
Default Value: true
---
#### animation option
Type: number
Default Value: 0
---
#### easing option
Type: string | function
Default Value:
Easing for animation. Defaults to null. See https://easings.net/ for examples. For other possible values, see https://www.w3schools.com/cssref/css3_pr_animation-timing-function.asp
---
#### dataIdAttr option
Type: string
Default Value: "data-id"
HTML attribute that is used by the toArray() method.
---
#### delay option
Type: number
Default Value: 0
Time in milliseconds to define when the sorting should start
---
#### delayOnTouchOnly option
Type: boolean
Default Value: false
Whether or not the delay should be applied only if the user is using touch (eg. on a mobile device). No delay will be applied in any other case.
---
#### forceFallback option
Type: boolean
Default Value: false
Ignore the HTML5 DnD behaviour and force the fallback to kick in
---
#### fallbackClass option
Type: string
Default Value: "sortable-fallback"
Class name for the cloned DOM Element when using forceFallback.
---
#### fallbackOnBody option
Type: boolean
Default Value: false
Appends the cloned DOM Element into the Document's Body.
---
#### fallbackTolerance option
Type: number
Default Value: 0
Specify in pixels how far the mouse should move before it's considered as a drag.
---
#### fallbackOffset option
Type: { x: 0, y: 0 }
Default Value: { x: 0, y: 0 }
---
#### emptyInsertThreshold option
Type: number
Default Value: 5
Pixel distance mouse must be from empty sortable to insert drag element into it
---
#### direction option
Type: undefined
Default Value:
Direction that the Sortable should sort in. Can be set to 'vertical', 'horizontal', or a function, which will be called whenever a target is dragged over. Must return 'vertical' or 'horizontal'. Leave blank to auto detect.
---
#### touchStartThreshold option
Type: undefined
Default Value:
How many pixels the point should move before cancelling a delayed drag event
---
#### setData option
Type: undefined
Default Value:
---
#### draggable option
Type: undefined
Default Value: null
Specifies which items inside the element should be draggable.
---
#### onChoose option
Type: fn(event: SortableEvent) => void
Default Value:
Element is chosen
---
#### onUnchoose option
Type: fn(event: SortableEvent) => void
Default Value:
Element is unchosen
---
#### onStart option
Type: fn(event: SortableEvent) => void
Default Value:
Element dragging started
---
#### onEnd option
Type: fn(event: SortableEvent) => void
Default Value:
Element dragging ended
---
#### onAdd option
Type: fn(event: SortableEvent) => void
Default Value:
Element is dropped into the list from another list
---
#### onUpdate option
Type: fn(event: SortableEvent) => void
Default Value:
Changed sorting within list
---
#### onRemove option
Type: fn(event: SortableEvent) => void
Default Value:
Element is removed from the list into another list
---
#### onFilter option
Type: fn(event: SortableEvent) => void
Default Value:
Attempt to drag a filtered element
---
#### onSort option
Type: fn(event: SortableEvent) => void
Default Value:
Called by any change to the list (add / update / remove)
---
#### onClone option
Type: fn(event: SortableEvent) => void
Default Value:
Called when creating a clone of element
---
#### onMove option
Type: fn(event: SortableEvent) => void
Default Value:
Event when you move an item in the list or between lists
---
#### onChange` option
Type: fn(event: SortableEvent) => void
Default Value:
Called when dragging element changes position
---