Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Svelte Sortable drag-and-drop list doesn't update when Svelte Store changes #1946

Open
HugoLiconV opened this issue Oct 20, 2020 · 8 comments

Comments

@HugoLiconV
Copy link

I am building a component using Svelte in which you have a list of words and you have to arrange them in the correct order by dragging the words to the answer section, for this, I am using SortableJS.

SortableJS

To store the answer and the words you can use I use svelte stores and everything works correctly. Now, I am trying to do the same but with an ʻonClick` event. But I have a bug where the store values are updated but the view does not.

To show the options and the answers I am doing this:

<div
  class="chips"
  use:sortable="{{ items: answer, options: { group: 'chips', forceFallback: false } }}"
>
  {#each get(answer) as chip, index}
    <span class="chip" on:click="{handleAnswerClick(chip, index)}">
      <spain class="tag is-medium">{chip}</spain>
    </span>
  {/each}
</div>

and if I replace the get in {#each get (answer) as chip, index} with $answer, the ʻonClick` event works but now the drag behaves strangely and with bugs.

Here is a codesandbox with both of the alternatives explained above

Reproduction

Scenario

https://codesandbox.io/s/sortable-bug-0lmd8

Version

package version
sortablejs 1.12.0
@types/sortablejs N/A
@waynevanson
Copy link
Contributor

Sortable is a one way binding, where Sortable is the controller. It doesn't listen to your data.

This is unfortunate. AT the time of this being created, data driven development wasn't considered for this project.

@kantord
Copy link

kantord commented Oct 22, 2020

@waynevanson is re-creating the sortable js instance every time the data changes a viable solution?

@waynevanson
Copy link
Contributor

Check out Store in the read me. That might do what youre after. I've never used it myself.

@samf
Copy link

samf commented Nov 16, 2020

@kantord did you ever figure this out? I'm running into the same thing, and my first attempts at recreating the sortable aren't working. I'm wondering if this is viable and I'm "just doing it wrong", or if it's never going to work that way.

@kantord
Copy link

kantord commented Nov 16, 2020

Hi @samf, not yet, I have been focusing on other things, and there's a lot of high prio things other than this.

Do you have some code example for your specific issue btw?

@acoyfellow
Copy link

acoyfellow commented Mar 22, 2021

I can second this "issue". Working on a solution. Thank you for SortableJS, i enjoy using it

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

edit: "solved" in a way i'm ok with:
https://svelte.dev/repl/3ca698f0c1064bd99667c9a7557c427d?version=3.35.0

Instead of mutating the original data object, make a copy upon initializing Sortable.. then, on sort, update the svelte data

@janvotava
Copy link

If you don't mind little overhead, you can use the #key block now. Ideally you would probably implement Sortable as an action using use: directive with a destroy() hook to not leave some memory leaks.

@Im-Madhur-Gupta
Copy link

Thanks @janvotava, your comment saved me. :)

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

7 participants