Topic: drag and drop sortable api

tjwilco priority asked 10 months ago


I'm trying to use the API to trigger an action when an item is moved. I'm using the code from your documentation but nothing is happening.

const sortableItem = document.getElementById('sortable-item-1');
sortableItem.addEventListener('move.mdb.sortable', (e) => {
  alert("moving!");
});

What am I doing wrong?


Aleardo Lodi priority answered 6 months ago


I have the same problem with exit.mdb.sortable but I can't resolve with a similar workaround using onExit. Suggestions?


mlazaru staff commented 6 months ago

hi, it seems to work fine:

https://mdbootstrap.com/snippets/standard/mlazaru/4008961


Michał Duszak staff answered 7 months ago


@Danny we didn't fix this issue. Until it's not fixed, you can create a workaround in the source code - in the sortable.js file there is this EVENT_MOVE constant in Line 41 - you have to change its name, for example:

const EVENT_MOVE = `onMove${EVENT_KEY}`;

then it should work under a different event - onMove.mdb.sortable

  const sortableItems = document.querySelectorAll('.sortable-item');
    sortableItems.forEach(item => {
      item.addEventListener('onMove.mdb.sortable', (e) => {
        console.log("moving!");
      });
    })

Michał Duszak staff answered 10 months ago


Hello, thank you for reporting this issue. It's in our TO DO list and will be resolved as soon as it is possible.

Best regards and keep coding,

Michal


Danny priority commented 7 months ago

Is this still not fixed? Can't get it working neither.



Please insert min. 20 characters.

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.

Status

Answered

Specification of the issue

  • User: Priority
  • Premium support: Yes
  • Technology: MDB Standard
  • MDB Version: MDB5 3.10.2
  • Device: any
  • Browser: any
  • OS: any
  • Provided sample code: No
  • Provided link: No