JavaScript Sortable do function on list changes?-CodePudding

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

CodePudding user response：

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" >
  <div >Item 1</div>
  <div >Item 2</div>
  <div >Item 3</div>
  <div >Item 4</div>
  <div >Item 5</div>
  <div >Item 6</div>
</div>

<div id="example2-right" >
  <div >Item 1</div>
  <div >Item 2</div>
  <div >Item 3</div>
  <div >Item 4</div>
  <div >Item 5</div>
  <div >Item 6</div>
</div>