Unofficial Svelte package for the SortableJS library.
See a live demo on Netlify.
-
Install with npm, pnpm, or yarn.
npm i -D @jhubbardsf/svelte-sortablejs -
Import SortableList from package.
import { SortableList } from '@jhubbardsf/svelte-sortablejs'; -
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>
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.
Type: string
Default Value: null
Add a multiDrag class. Automatically mounts the multiDrag Plugin, sets it to true and sets fallbackTolerance to 3.
Type: string
Default Value: null
Add a swap class. Automatically mounts the swap Plugin, sets it to true.
Type: string | GroupOptions
Default Value:
"name" OR { name: "...", pull: [true, false, 'clone', array], put: [true, false, array] }
Type: boolean
Default Value: true
Sorting inside list
Type: boolean
Default Value: false
Disables the sortable if set to true.
Type: undefined
Default Value:
Type: string
Default Value:
Drag handle selector within list items
Type: number
Default Value: 1
Threshold of the swap zone. Must be between 0 and 1.
Type: boolean
Default Value: false
Will always use inverted swap zone if set to true.
Type: number
Default Value:
Threshold of the inverted swap zone (will be set to swapThreshold value by default).
Type: boolean
Default Value: true
Remove the clone element when it is not showing, rather than just hiding it
Type: string
Default Value: "sortable-ghost"
Class name for the drop placeholder.
Type: string
Default Value: "sortable-chosen"
Class name for the chosen item.
Type: string
Default Value: "sortable-drag"
Class name for the dragging item.
Type: string
Default Value: "a; img"
Elements to ignore
Type: string | Function
Default Value:
Selectors that do not lead to dragging (String or Function)
Type: boolean
Default Value: true
Type: number
Default Value: 0
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
Type: string
Default Value: "data-id"
HTML attribute that is used by the toArray() method.
Type: number
Default Value: 0
Time in milliseconds to define when the sorting should start
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.
Type: boolean
Default Value: false
Ignore the HTML5 DnD behaviour and force the fallback to kick in
Type: string
Default Value: "sortable-fallback"
Class name for the cloned DOM Element when using forceFallback.
Type: boolean
Default Value: false
Appends the cloned DOM Element into the Document's Body.
Type: number
Default Value: 0
Specify in pixels how far the mouse should move before it's considered as a drag.
Type: { x: 0, y: 0 }
Default Value: { x: 0, y: 0 }
Type: number
Default Value: 5
Pixel distance mouse must be from empty sortable to insert drag element into it
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.
Type: undefined
Default Value:
How many pixels the point should move before cancelling a delayed drag event
Type: undefined
Default Value:
Type: undefined
Default Value: null
Specifies which items inside the element should be draggable.
Type: fn(event: SortableEvent) => void
Default Value:
Element is chosen
Type: fn(event: SortableEvent) => void
Default Value:
Element is unchosen
Type: fn(event: SortableEvent) => void
Default Value:
Element dragging started
Type: fn(event: SortableEvent) => void
Default Value:
Element dragging ended
Type: fn(event: SortableEvent) => void
Default Value:
Element is dropped into the list from another list
Type: fn(event: SortableEvent) => void
Default Value:
Changed sorting within list
Type: fn(event: SortableEvent) => void
Default Value:
Element is removed from the list into another list
Type: fn(event: SortableEvent) => void
Default Value:
Attempt to drag a filtered element
Type: fn(event: SortableEvent) => void
Default Value:
Called by any change to the list (add / update / remove)
Type: fn(event: SortableEvent) => void
Default Value:
Called when creating a clone of element
Type: fn(event: SortableEvent) => void
Default Value:
Event when you move an item in the list or between lists
Type: fn(event: SortableEvent) => void
Default Value:
Called when dragging element changes position