Open SntTGR opened 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
Is this correct behaviour? I'm a bit surprised that the elements are not behaving as a clone list
Hi! Im not very familiar with sortablejs
Im using the following add/remove handlers without removing the task from the list
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
Is this correct behaviour? I'm a bit surprised that the elements are not behaving as a clone list