Comment déclencher une modification dans JQuery?

Question

Je suis nouveau à JQuery, donc c'est probablement une question très bête.

J'ai utilisé JQuery pour rendre les éléments d'une table glissables. J'ai demandé a question sur la façon de le rendre plus rapide, et la meilleure réponse que j'ai eu jusqu'à présent était de désactiver droppable pour toutes les cellules, et ne les activer que lorsque quelque chose est traîné.

En fait, pour moi, cela a beaucoup de sens car je veux seulement être capable de faire glisser une cellule sur une autre cellule dans la même rangée. J'ai donc seulement besoin d'appliquer droppable aux cellules dans la même rangée. Alors, je fais ceci:

$(document).ready 
(
    function() 
    { 
    $('.draggable_div').draggable 
    (
     { 
     addClasses: false, 
     scroll: false, 
     axis: 'x', 
     start: function(event, ui) 
     { 
      $(this).css('background-color','#ddddff'); 
      var $cells = $(this).parent().parent().children(); 
      $cells.addClass("droppable_td"); 
     } 
     } 
    ); 

... 

Firebug me dit que j'ai ajouté avec succès la classe « draggable_td » aux cellules de la ligne droite. Mais comment puis-je faire que cela déclenche le changement? La façon dont j'ai le code mis en place au moment, largable est fixé comme suit:

$('.droppable_td').droppable 
    (
    { 
     addClasses: false, 
     over: function(event, ui) 
     { 
     $(this).css('background-color', '#ccffcc'); 
     }, 
     out: function(event, ui) 
     { 
     $(this).css('background-color', null); 
     }, 
     drop: function(event, ui) 
     { 

etc... 

Je sais que le code fonctionne, parce que si je mets cette classe dans le < td> dans le code HTML approprié tout cela fonctionne (Juste très lentement). En d'autres termes: Si toutes les cellules sont droppables depuis le début, cela fonctionne. Comment puis-je modifier dynamiquement une cellule pour la rendre droppable à la suite d'un événement?

Answer 1

Configurez les cellules qui sont droppables dans l'événement de démarrage de votre draggable.

start: function(event, ui) 
{ 
    $(this).css('background-color','#ddddff'); 
    var $cells = $(this).parent().parent().children(); 
    $cells.addClass("droppable_td"); 
    $cells.droppable({...}); 
} 

Answer 2

Je pense qu'il est quand vous avez appelé largable() que vous avez fait les cellules largable de sorte que vous devez appeler largable dans la fonction de gestionnaire de glisser.

par exemple.

start: function(event, ui) 
    { 
     $(this).css('background-color','#ddddff'); 
     var $cells = $(this).parent().parent().children(); 
     $cells.addClass("droppable_td"); 
     $('.droppable_td').droppable 
     (
     { 
      addClasses: false, 
      over: function(event, ui) 
     { 
      $(this).css('background-color', '#ccffcc'); 

etc.

Je vous suggère de faire tout cela en fonction bien.