Tenho um esquema de 3 colunas contendo cards, preciso que esses cards possam ser arrastados de uma coluna para outra e reorganizados dentro de uma mesma coluna.
Consegui com jQuery fazer com que os cards sejam arrastáveis, mas eu só consigo arrastar da coluna 2 e 3 para a coluna 1. Como posso consertar para que consiga arrastar cards para as colunas 2 e 3 também?
Segue meu código:
<ul class="col-sm do-now-list" id="card-list">
<li>
<div class="card"></div>
</li>
<li>
<div class="card"></div>
</li>
</ul>
<ul class="col-sm do-later-list" id="card-list">
<li>
<div class="card"></div>
</li>
<li>
<div class="card"></div>
</li>
<li>
<div class="card"></div>
</li>
</ul>
<ul class="col-sm on-hold-list" id="card-list">
<li>
<div class="card"></div>
</li>
<li>
<div class="card"></div>
</li>
</ul>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"
integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"
integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"
integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
<script src="dist/jquery-ui.js"></script>
<script src="dist/jquery-ui.min.js"></script>
<script>
$(function(){
$(".do-now-list, .do-later-list, .on-hold-list").sortable({
connectWith: "#card-list"
}).disableSelection();
});
</script>