Error in columns with sortable, how to resolve?

Asked

Viewed 43 times

0

I have a 3-column scheme containing cards, I need these cards to be dragged from one column to another and rearranged within the same column.

I got jQuery to make the cards draggable, but I can only drag from column 2 and 3 to column 1. How can I fix it so I can drag cards to columns 2 and 3 as well?

Follows 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>
javascript html5 jquery-ui drag-n-drop

1 answer

0


I managed to solve!

Just swap the class with the id.

<ul class="col-sm card-list" id="do-now-list">
   <li>
      <div class="card"></div>
   </li>
   <li>
      <div class="card"></div>
   </li>
</ul>
<ul class="col-sm card-list" id="do-later-list">
   <li>
      <div class="card"></div>
   </li>
   <li>
      <div class="card"></div>
   </li>
   <li>
      <div class="card"></div>
   </li>
</ul>
<ul class="col-sm card-list" id="on-hold-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>

Browser other questions tagged javascript html5 jquery-ui drag-n-drop

You are not signed in. Login or sign up in order to post.