jQuery Nopp Droppables

Question

J'ai un ensemble imbriqué de droppables jQuery ... une droppable externe qui englobe la majeure partie de la page et un ensemble de droppables internes imbriqués sur la page. La fonctionnalité que je veux est:

• Si un draggable est tombé à l'extérieur de l'une des droppables internes, il doit être accepté par le largable externe.

• Si un objet déplaçable est déposé sur l'une des gouttières internes, il ne doit PAS être accepté par la gouttelette externe, que la gouttelette interne accepte ou non la draggable.

Donc, ce serait facile si je pouvais garantir 1+ droppables intérieur accepteraient la draggable, parce que l'attribut avide veillerait il ne se déclencher une fois. Malheureusement, la plupart du temps, le droppable interne rejette également le draggable, ce qui signifie que l'option gourmande n'aide pas vraiment. Résumé: La fonctionnalité de base est un ensemble de droppables internes valides/invalides pour accepter le draggable, mais lorsque vous lancez le draggable à l'extérieur de l'un des draggables, il est détruit par la droppable externe.

Quelle est la meilleure façon de faire cela?

Answer 1

Pour pouvoir faire cela, vous ne pouvez pas utiliser l'option intégrée accept car cela ne déclenche pas l'événement drop pour le largable courant si le draggable n'est pas accepteur, et sera à cet effet dans le parent se propage largable.

Donc, la meilleure façon est de mettre en œuvre votre propre de chèque, ce qui est assez simple:

$('#foo').droppable({ 
    drop: function(e){ 
     console.log(e); 
    } 
}); 

var accepted = '#red'; 
$('#bar').droppable({ 
    greedy: true, 
    drop: function(e,ui){ 
     if (!$(ui.draggable).is(accepted)) { 
      return false; 
     } 
     console.log(e.target); 
    } 
}); 

Vous pouvez voir comment les travaux ci-dessus sur jsFiddle.