Drag and Drop between columns with Sort, move cards between them

Question

I’m developing an application where I have 3 columns of cards, I need the cards to be moved from one column to the other and between each other.

I was able to get the card moved to another column, but I can only move it once, once it’s moved it can’t be relocated to another position.

Follows the code:

<!-- Card Columns -->
                    <div class="row">
                        <div class="col-sm droppable ui-widget-header" id="do-now">
                            <!-- Card -->
                            <div class="card draggable ui-widget-content" id="card">
                                <div class="card-body">
                                    <strong id="card-label">eos-youtube-gjs <span id="card-spacing">#29</span></strong>
                                    <p id="card-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris at urna rhoncus, elementum eros eu, mattis risus suspendisse</p>
                                    <img src="img/new_intern.jpeg" height="30px" width="30px">
                                    <strong id="user">username <span id="user-spacing">13 pts</span></strong>
                                </div>
                            </div>  
                            <!-- END Card -->
                        </div>
                        <div class="col-sm" id="do-later">

                        </div>
                        <div class="col-sm" id="on-hold">

                        </div>
                    </div>
                    <!-- END Card Columns -->       
    <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() {
            $( ".draggable" ).draggable();
            $( ".droppable" ).droppable({
                drop: function (event, ui){
                    $(this)
                        .find (".card-body #card-label #card-spacing #card-text img #user #user-spacing");
                }
            });
        });

        $(function(){
            $("#do-now").sortable({
                handle: '.card .card-body #card-label #card-spacing #card-text img #user #user-spacing',
                connectWith: '#do-later #on-hold'
            }).disableSelection();
            $("#do-later").sortable({
                handle: '.card .card-body #card-label #card-spacing #card-text img #user #user-spacing',
                connectWith: '#do-now #on-hold'
            }).disableSelection();
            $("#on-hold").sortable({
                handle: '.card .card-body #card-label #card-spacing #card-text img #user #user-spacing',
                connectWith: '#do-now #do-later'
            }).disableSelection();
        });
    </script>
</body>

How do I move cards as many times as needed?

Answer 1

You can’t move again because it’s underneath the others divs. By releasing it, you can no longer drag it.

Include a z-index: 1 in div id="card" to be on top and always within reach of the mouse cursor:

#card{
   z-index: 1;
}

Example:

$(function() {
   $( ".draggable" ).draggable();
   $( ".droppable" ).droppable({
       drop: function (event, ui){
           $(this)
               .find (".card-body #card-label #card-spacing #card-text img #user #user-spacing");
       }
   });
});

$(function(){
   $("#do-now").sortable({
       handle: '.card .card-body #card-label #card-spacing #card-text img #user #user-spacing',
       connectWith: '#do-later #on-hold'
   }).disableSelection();
   $("#do-later").sortable({
       handle: '.card .card-body #card-label #card-spacing #card-text img #user #user-spacing',
       connectWith: '#do-now #on-hold'
   }).disableSelection();
   $("#on-hold").sortable({
       handle: '.card .card-body #card-label #card-spacing #card-text img #user #user-spacing',
       connectWith: '#do-now #do-later'
   }).disableSelection();
});

#card{
   z-index: 1;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css">
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" integrity="sha384-/Y6pD6FV/Vv2HJnA6t+vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQsN6M" crossorigin="anonymous">
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js" integrity="sha384-h0AbiXch4ZDo7tp9hKZ4TsHbi047NrKGLO3SEJAg45jXxnGIfYzk4Si90RDIqNm1" crossorigin="anonymous"></script>

<div class="row">
   <div class="col-sm droppable ui-widget-header" id="do-now">
       <!-- Card -->
       <div class="card draggable ui-widget-content" id="card">
           <div class="card-body">
               <strong id="card-label">eos-youtube-gjs <span id="card-spacing">#29</span></strong>
               <p id="card-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris at urna rhoncus, elementum eros eu, mattis risus suspendisse</p>
               <img src="img/new_intern.jpeg" height="30px" width="30px">
               <strong id="user">username <span id="user-spacing">13 pts</span></strong>
           </div>
       </div>  
       <!-- END Card -->
   </div>
   <div class="col-sm" id="do-later" style="background: red;">

   </div>
   <div class="col-sm" id="on-hold" style="background: blue;">

   </div>
</div>