I am having trouble to change my sortablejs settings after its set.
The initialization of this function is done within an other script(this script may not change) and is done when the page is loaded.
what i have for code in other script is the following:
//initialize sortable
function initSortable() {
$(".menu-item-list").each(function (index) {
var id = this.id;
var options = {
animation: 150,
group: "menu-item-list",
chosenClass: "sortable-chosen",
ghostClass: "sortable-ghost",
filter: ".empty-area-text",
cancel: ".empty-area-text",
onAdd: function (e) {
//moved to the new column. save the items position
saveItemsPosition();
removeEmptyAreaText(e.to);
addEmptyAreaText(e.from);
adjustHeightOfItemsContainer();
removeSubmenuClass(e.item, e.to);
},
onUpdate: function (e) {
//moved to the same column. save the items position
saveItemsPosition();
adjustHeightOfItemsContainer();
removeSubmenuClass("", "");
}
};
Sortable.create($("#" + id)[0], options);
});
}
To make it so that you can change the settings is by using
setTimeout(() => { // timeout is important
$(".menu-item-list").each(function() {
let instance = Sortable.get(this); // Get existing Sortable instance
if (instance) {
// Apply the updated filter setting
instance.option("multiDrag", true);
instance.option("selectedClass", "selected");
instance.option("fallbackTolerance", 3);
}
});
}, 500);