MaxLeiter / sortablejs-vue3

A thin wrapper around Sortable.js for Vue 3
https://sortablejs-vue3.maxleiter.com
MIT License
378 stars 19 forks source link

Unexpected behaviour when not removing from data array #94

Open SntTGR opened 11 months ago

SntTGR commented 11 months ago

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