
Security News
ESLint Adds Official Support for Linting HTML
ESLint now supports HTML linting with 48 new rules, expanding its language plugin system to cover more of the modern web development stack.
svelte-sortable-list
Advanced tools
A svelte 3 component that implements a list with animated drag-n-drop functionality.
This component renders a list of items which can be reordered by draggin and dropping and implements FLIP animation for adding/removing/reordering items in the list.
To make the component work you need two thing at least: setting the list
prop and responding to on:reorder
event.
<script>
import SortableList from 'svelte-sortable-list';
let list = ["First Item", "Second Item", "Third Item"];
const sortList = ev => {list = ev.detail};
</script>
<SortableList
{list}
on:sort={sortList}
/>
name | type | required | default |
---|---|---|---|
list | Array | ✔️ | ✖️ |
key | String | ❌ | ✖️ |
slot | Component | ❌ | <p>{key ? item[key] : item}</p> |
The way this works is that you are required to pass a list
prop to the component, which could be an array with anything inside, but if the array contains objects or arrays you must pass the key
prop to specify what property is going to be used as key (needs to be unique to each object in the array).
You can customize what element is used as the list item passing any element as the child. If you do this you can access the item data by setting let:item
on <SortableList>
and {item}
on your element ( you can also access the index in let:index
).
The component handles all the internal functionality but since you are passing the list as a prop, it can't actually change the data you pass to it, so you need to respond to an event that gets triggered any time you sort items.
This is done using the on:sort
event handler, which gets passed an event
object that contains the list inside the details
property ( this is the default way of handling event data in svelte).
<script>
import SortableList from 'svelte-sortable-list';
import Component from './Component.svelte';
let list = [
{id: 1, name: 'First Item'},
{id: 2, name: 'Second Item'},
{id: 3, name: 'Third Item'}
];
const sortList = ev => {list = ev.detail};
</script>
<SortableList
{list}
key="id"
on:sort={sortList}
let:item
>
<Component {item} />
</SortableList>
FAQs
A svelte 3 component that implements a list with animated drag-n-drop functionality.
The npm package svelte-sortable-list receives a total of 233 weekly downloads. As such, svelte-sortable-list popularity was classified as not popular.
We found that svelte-sortable-list demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
ESLint now supports HTML linting with 48 new rules, expanding its language plugin system to cover more of the modern web development stack.
Security News
CISA is discontinuing official RSS support for KEV and cybersecurity alerts, shifting updates to email and social media, disrupting automation workflows.
Security News
The MCP community is launching an official registry to standardize AI tool discovery and let agents dynamically find and install MCP servers.