JavaScript Sortable do function on list changes?

How can I make a function fire when a sortable list changes?

I have looked for some examples but they are making the lists different to how I am and I cant see how to do it with how my sortable lists are generated. Perhaps I am using a different Sortable version or something?

This is how I make my lists...

<script>

    Sortable.create(plansList, {
        animation: 100,
        group: 'list-1',
        draggable: '.recipe',
        handle: '.handle',
        sort: true,
        filter: '.sortable-disabled',
        chosenClass: 'active'
    });

    Sortable.create(suggestionsList, {
        animation: 100,
        group: 'list-1',
        draggable: '.recipe',
        handle: '.handle',
        sort: true,
        filter: '.sortable-disabled',
        chosenClass: 'active'
    });

</script>

As you can see I have 2 lists. I want both to fire the same function when they change, but if both lists change (because an item was moved from one list to the other) I don't want the function to fire twice.

Can anyone help?

Thanks, Chris

Solution

Event onEnd will only fire once, as requested. But it will fire if also no change has been made. So you might need to compare old index to new index.

var example2Left = document.querySelector("#example2-left");
var example2Right = document.querySelector("#example2-right");

new Sortable(example2Left, {
  group: 'shared', // set both lists to same group
  animation: 150,
  onEnd: foo
});
new Sortable(example2Right, {
  group: 'shared',
  animation: 150,
  onEnd: foo
});

function foo(ev) {
  var to = ev.to;
  var from = ev.from;
  var oldIndex = ev.oldIndex;
  var newIndex = ev.newIndex;

  if (to != from || oldIndex != newIndex) {
    singleOnChange(ev)
  }
}

function singleOnChange(ev) {
  console.log("list(s) changed")
}

.col {
  width: 50%;
  float: left;
}

.list-group-item {
  padding: 10px;
  margin: 2px;
  background: blue;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/Sortable/1.15.0/Sortable.min.js" integrity="sha512-Eezs+g9Lq4TCCq0wae01s9PuNWzHYoCMkE97e2qdkYthpI0pzC3UGB03lgEHn2XM85hDOUF6qgqqszs+iXU4UA==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>

<div id="example2-left" class="list-group col">
  <div class="list-group-item">Item 1</div>
  <div class="list-group-item">Item 2</div>
  <div class="list-group-item">Item 3</div>
  <div class="list-group-item">Item 4</div>
  <div class="list-group-item">Item 5</div>
  <div class="list-group-item">Item 6</div>
</div>

<div id="example2-right" class="list-group col">
  <div class="list-group-item">Item 1</div>
  <div class="list-group-item">Item 2</div>
  <div class="list-group-item">Item 3</div>
  <div class="list-group-item">Item 4</div>
  <div class="list-group-item">Item 5</div>
  <div class="list-group-item">Item 6</div>
</div>