/svelte-sortablejs

Svelte wrapper for SortableJS

Primary LanguageSvelte

svelte-sortablejs

npm npm bundle size Netlify GitHub last commit

Unofficial Svelte package for the SortableJS library.

Demo

See a live demo on Netlify.

Quick Start

  1. Install with npm, pnpm, or yarn.

    npm i -D @jhubbardsf/svelte-sortablejs

  2. Import SortableList from package.

    import { SortableList } from '@jhubbardsf/svelte-sortablejs';

  3. Use the SortableList component in your svelte file.

    <SortableList>
    <div> List Item 1 </div>
    <div> List Item 2 </div>
    <div> List Item 3 </div>
</SortableList>

Example Use

Look in src/routes/index.svelte to see Svelte implementations of the SortableJS examples.

SortableList Props

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