JQuery utilisateur pour faire glisser un DIV et tomber dans un TD ... et avoir le "snap" DIV en place

Question

Je suis en train de terminer une réécriture du système de gestion des tâches, et je suis en train d'ajouter des capacités de glisser-déposer.

Je veux que l'utilisateur d'être en mesure de faire glisser une tâche DIV d'une colonne (TD) et le déposer dans une autre colonne (TD). J'ai ceci fonctionnant correctement, sauf pour quelques problèmes mineurs de mise en forme. J'ai le TD avec une classe appelée droppable qui accepte les classes draggables. Qu'est-ce que je voudrais arriver est effectivement supprimer la tâche DIV de la TD actuelle et l'ajouter à la baisse sur TD.

Voici mon script:

<script type="text/javascript"> 
    $(function() { 
     $(".draggable").draggable({ 
      cursor: 'move', 
      cancel: 'a', 
      revert: 'invalid', 
      snap: 'true' 
     }); 
    }); 
    $(function() { 
     $(".droppable").droppable({ 
      accept: '.draggable', 
      hoverClass: 'droppable-hover', 
      drop: function(event, ui) { } 
     }); 
    }); 

</script> 

Voici mon Html:

<h3> 
    My Queue</h3> 
<table style="width: 100%;" class="queue"> 
    <tbody> 
     <tr>    
      <td style="width: 14%; vertical-align:bottom ;" class="droppable" id="StagePG">     
      </td>    
      <td style="width: 14%; vertical-align:bottom ;" class="droppable" id="StageRY">     
      </td>   
      <td style="width: 14%; vertical-align:bottom ;" class="droppable" id="StagePR">     
       <div class="queue-item draggable" title="Task description goes here."> 
        <em>Customer</em> 
        <strong>Project</strong> 
        <h4><a href="/Sauron/Task/Details/100001">100001</a></h4> 
       </div> 

       <div class="queue-item draggable" title="Task description goes here."> 

        <em>Customer</em> 
        <strong>Project</strong> 
        <h4><a href="/Sauron/Task/Details/100002">100002</a></h4> 
       </div>    
      </td> 
      <td style="width: 14%; vertical-align:bottom ;" class="droppable" id="StageRT"> 
      </td> 
      <td style="width: 14%; vertical-align:bottom ;" class="droppable" id="StageTE"> 
      </td> 
      <td style="width: 14%; vertical-align:bottom ;" class="droppable" id="StageRL"> 
      </td>    
     </tr> 
    </tbody> 
    <tfoot> 
     <tr> 
      <td style="width: 14%; text-align: center;"> 
       Pending (0) 
      </td> 
      <td style="width: 14%; text-align: center;"> 
       Ready (0) 
      </td> 
      <td style="width: 14%; text-align: center;"> 
       In Progress (2) 
      </td> 
      <td style="width: 14%; text-align: center;"> 
       Ready for Testing (0) 
      </td> 
      <td style="width: 14%; text-align: center;"> 
       Testing (0) 
      </td> 
      <td style="width: 14%; text-align: center;"> 
       Ready for Release (0) 
      </td> 
     </tr> 
    </tfoot> 
</table> 

Luttant avec l'événement drop et comment mettre en œuvre. Toute aide est appréciée!

Answer 1

Cet exemple fonctionne, mais il reste à voir car la div est locatd n'importe où. Cela fonctionne parce que l'événement est tiré le premier « largables » plutôt que « draggable »

$(function() { 

    $_dropEnd = null; 

    $(".draggable").draggable({ 
      cursor: 'move', 
      cancel: 'a', 
      revert: 'invalid', 
      snap: 'true', 
      stop: function(event, ui) { 
       $(this).appendTo($_dropEnd); 
       $_dropEnd = null; 
      } 
     }); 
    }); 
    $(function() { 
     $(".droppable").droppable({ 
      accept: '.draggable', 
      hoverClass: 'droppable-hover', 
      drop: function(event, ui) { 
       $_dropEnd = this; 
      } 
     }); 
    }); 

Answer 2

Comme suggéré Vif @ David nous y sommes allés avec la route ... sortable a fait exactement ce que je devais à faire!