Sortable: Svelte JS support

Created on 3 Jun 2020  路  6Comments  路  Source: SortableJS/Sortable

Hello,
I see that Vue, React, Angular and others have their support and I was just thinking that it would be really great to have a SortableJS library for Svelte as well :) would it be difficult to add the support?

thanks in advance

feature

Most helpful comment

Came here to +1 this, but then realized.. There is nothing special needed, it works out of the box like this (pseudocode):

<script>
  import Sortable from 'sortablejs';
  import { onMount } from "svelte";
  let el;
  onMount(async () => {
    Sortable.create(el, { /* your sortable options here */ })
  });
</script>
<ul this={el}>
  <li>Reorder Me</li>
  <li>And me!</li>
</ul>

Working example:

https://svelte.dev/repl/9fe76dda194348d1acd6d2e336c30c22?version=3.24.0

All 6 comments

Very much support this!

Came here to +1 this, but then realized.. There is nothing special needed, it works out of the box like this (pseudocode):

<script>
  import Sortable from 'sortablejs';
  import { onMount } from "svelte";
  let el;
  onMount(async () => {
    Sortable.create(el, { /* your sortable options here */ })
  });
</script>
<ul this={el}>
  <li>Reorder Me</li>
  <li>And me!</li>
</ul>

Working example:

https://svelte.dev/repl/9fe76dda194348d1acd6d2e336c30c22?version=3.24.0

That is cool, however aside the "View side", the "model side" is missing (or at least must be somehow implemented)

Meaning: it would be great that every update the user performs to the DOM nodes could trigger a model update and vice-versa

possibly with a more svelteish way using actions?

That could be a good option. I will try to play with it in a few days and then post down here my successes/failures :)

If anyone creates a working example, we can add it to the official repository :)

Was this page helpful?
0 / 5 - 0 ratings