0

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>

1 Resposta 1

0

Consegui resolver!

Bastou trocar a class com a 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>

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .