Trigger change onFilter.

[kilianso]

Problem

I have multiple Sortable instances where people can drag items from one of them to one single dropzone but not back. Once placed in the target dropzone, a delete button appears. I'm using onFilter to delete items on button click. Like this:

onFilter: function(evt){                    
   let item = evt.item,
         ctrl = evt.target,

   if (Sortable.utils.is(ctrl, ".js-remove")) {  // Click on remove button
         evt.from.removeChild(evt.item); // remove sortable item
         evt.from.classList.remove('taken'); // remove taken class
    }
}

This works but the problem is, it's not triggering a mutation of the Sortable dropzone which leads to errors once i try to destroy them (e.g. on route change within a Svelte app).

Just to let you know that this is not an issue in my Svelte setup: If I allow the put-back and drag items out of the dropzone back to their origin, it is updating and the errors are gone.

Question

How can i trigger a change event from within the onFilter method to let the current instance know about the changes? Or are there any other possibilities to achieve this? Thank you!

[waynevanson]

@kilianso I'm trying to understand the situation but we'll need an example to help further.

Here are some templates to get you started.

• Javascript: https://codesandbox.io/s/sortablejs-javascript-jy3tl?file=/src/index.js
• Typescript: https://codesandbox.io/s/sortablejs-typescript-6it9n?file=/src/index.ts