¿Cómo puedo hacer que se active una función cuando cambia una lista ordenable?
He buscado algunos ejemplos, pero están haciendo las listas diferentes a como soy y no veo cómo hacerlo con la forma en que se generan mis listas ordenables. ¿Quizás estoy usando una versión clasificable diferente o algo así?
Así es como hago mis listas...
<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>Como puedes ver tengo 2 listas. Quiero que ambos activen la misma función cuando cambien, pero si ambas listas cambian (porque un elemento se movió de una lista a la otra), no quiero que la función se active dos veces.
¿Alguien puede ayudar?
gracias, cris
El evento onEnd solo se activará una vez, según lo solicitado. Pero se disparará si tampoco se ha realizado ningún cambio. Por lo tanto, es posible que deba comparar el índice antiguo con el índice nuevo.
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>