Svelte JS support

[gufoscuro]

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

[zahachtah]

Very much support this!

[acoyfellow]

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

[gufoscuro]

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

[zahachtah]

possibly with a more svelteish way using actions?

[gufoscuro]

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 :)

[waynevanson]

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

[mkstix6]

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

@acoyfellow would you know how to mount a plugin correctly. I'm trying to use the Swap plugin.

[harshmandan]

Works fine here: https://svelte.dev/repl/972fbd0754424124a94c47399826ddcd?version=3.40.2

[jhubbardsf]

Hey. Just wanted to throw out that I put together a small Svelte library here.

[TomRadford]

Hello!

Thought I'd just pop this here for anyone looking for a nice Svelte Action that provides a sortable-like functionality very easily: https://github.com/isaacHagoel/svelte-dnd-action 🥳

Although... Sortable can also work great in Svelte with the above solutions!