MaxLeiter / MaxLeiter/sortablejs-vue3

Unexpected behaviour when not removing from data array

Open
#94 0 comments 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

Dominant language
Vue
Stars
413
Forks
27
PR merge metrics
No merged PRs in 30d

Description

Hi! Im not very familiar with sortablejs

const baseTasks : Array<{ id: Task['id'] }> = [ {id: '1'}, {id: '2'}, {id: '3'} ]
const taskList : Ref<Array<{id: Task['id'], removed?: boolean}>> = ref([]);

Im using the following add/remove handlers without removing the task from the list

function listOnAdd(event: SortableEvent): void {    
    const taskId = event.item.getAttribute('task-id');
    if (typeof taskId !== 'string') throw new Error('Invalid Task Id!');
    
    event.item.remove();
    taskList.value.push({id: taskId});
}

function listOnRemove(event: SortableEvent): void {
    const taskId = event.item.getAttribute('task-id');
    if (typeof taskId !== 'string') throw new Error('Invalid Task Id!');
    
    const taskIndex = taskList.value.findIndex(i => i.id === taskId);
    if (taskIndex === -1) throw new Error('Task not found!');
    
    taskList.value[taskIndex] = {id: taskId, removed: true}; // only mark them as 'removed'
    // taskList.value.splice(taskIndex, 1);
}

function listOnReset() {
    taskList.value = [...baseTasks];
}
 <button @click="listOnReset">reset</button>

 <Sortable
    ref="sortableElement"
    class="task-list"
    :list="taskList"
    item-key="id"
    :options="options"
    @add=     "listOnAdd"
    @remove=  "listOnRemove"
  >
    <template #item="{element}">
      <Task :task-id="element.id"/>
    </template>
  </Sortable>

The elements that are moved between categories, when reset, dont seem to be added again.
https://stackblitz.com/edit/recursive-template-refs-5ip6ao?file=src%2Fcomponents%2FTaskList.vue

23-10-2023-46

Is this correct behaviour? I'm a bit surprised that the elements are not behaving as a clone list

Contributor guide

No contributing guide indexed for this repository

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Start with the linked StackBlitz reproduction and inspect the Vue component using the Sortable wrapper. Trace the @add and @remove handlers, the taskList updates, and listOnReset behavior. Done means establishing whether reset should restore moved elements when removed items are only marked rather than spliced, and documenting or correcting the observed behavior.

Written by the indexing model from the issue text.

Assessment

Tech stack
typescript
Domain
frontend
Issue type
Bug
Difficulty
3/5
Estimated time
1-2 days
Activity status
Stale
Clarity
Needs clarification
Newbie friendliness
35/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.