Error in columns with sortable, how to solve?

Question

Error in columns with sortable, how to solve?

Navigation

#1 by (0 votes)

0

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>

javascript html5 jquery-ui drag-n-drop

asked by anonymous 06.07.2018 / 17:25

1 answer

Pass a property to a Label on xamarin Ring event not recognized in UITextField in UIView within UiScrollView

score 0 · Accepted Answer

I solved it!

Just change the class to 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>