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);
   });
}

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);
   });
}

• javascript
• sortablejs

1 Answer 1

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);