Tengo dos listas y quiero activar acciones cuando suelte elementos de la lista 2 en la lista 1.

No he podido hasta ahora.

1 elemento de la Lista 1

 <li data-role="list-divider"> <div class="row"> <div class="col-md-6"> <span>Holidays</span> </div> <div class="col-md-6"> €2000 </div> </div> </li>

1 elemento de la Lista 2

 <li data-role="list-divider"> <div class="row"> <div class="col-xl-6 col-lg-6"> <div class="card l-bg-blue-dark"> <div class="card-statistic-3 p-4"> <div class="card-icon card-icon-large"><i class="fas fa-laptop"></i></div> <div class="mb-4"> <h5 class="card-title mb-0">Laptop</h5> </div> <div class="row align-items-center mb-2 d-flex"> <div class="col-8" id="test"> <h2 class="d-flex align-items-center mb-0"> €1500 </h2> </div> </div> </div> </div> </div> </div> </li>

JS:

 let favoriteList = document.getElementById('favoriteList'); let otherList = document.getElementById('otherList'); let favorite_list = Sortable.create(favoriteList, { animation: 150, group: 'shared', ghostClass: 'sortable-ghost', }); let other_list = Sortable.create(otherList, { animation: 150, group: 'shared', ghostClass: 'sortable-ghost', sort: false }); $( "#favoriteList" ).sortable({ receive: function( event, ui ) { alert("Sorted!!"); } });

Quiero hacer que el elemento de la lista 2 sea igual al elemento de la lista 1. Entiendo que puedo lograr esto eliminando elementos y cambiando clases (y, por lo tanto, estilos). Sin embargo, no puedo activar ninguna acción cuando suelto elementos en la lista 1. Sigue activando acciones justo cuando muevo elementos en la lista 1

¿alguna sugerencia?