I have a 3-column layout containing cards, I need these cards to be dragged from one column to another and rearranged within a single column.
I've got jQuery to make the cards draggable, but I can only drag from column 2 and column 3 to column 1. How can I fix it so that I can drag cards to columns 2 and 3 as well?
Follow my code:
<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>