Skip to content

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

Description

@HugoLiconV

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

Activity

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

      Milestone

      No milestone

      Relationships

      None yet

      Development

      No branches or pull requests

      Issue actions