Svelte Sortable drag-and-drop list doesn't update

422 views Asked by At

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

0

There are 0 answers