jQuery droppable issue

Question

J'ai écrit un code jQuery qui permet à un utilisateur de créer 2 boîtes à l'écran, puis de les faire glisser et déposer l'un dans l'autre. Du point de vue HTML, il ressemblerait à ceci ...

<div id="1"> 
    <div id="2"> 
    </div> 
</div> 

Si je crée une autre boîte et faites-le glisser sur la case 2 et déposez-le, il est toujours tombé dans la case 1 (c.-à-mère de la case 2). Ce que je veux ... ce

<div id="1"> 
    <div id="2"> 
     <div id="3"> 
     </div> 
    </div> 
</div> 

... mais ce que je reçois est ce ...

<div id="1"> 
    <div id="2"> 
    </div> 
    <div id="3"> 
    </div> 
</div> 

Vous [UTILISÉ POUR POUVOIR] peut voir ce qui se passe ici. .. http://acarna.com/editor.php < - J'ai résolu le problème ... voir ma réponse ci-dessous

Cliquez sur le bouton "H" en haut à gauche pour créer une boîte. Prenez le carré gris dans le coin supérieur droit de la boîte pour le faire glisser plus bas dans la page. Déplacez votre souris sur le bord ou le coin de la boîte et redimensionnez-le.

Puis cliquez à nouveau sur "H" pour créer la boîte 2. Faites glisser et déposez la boîte 2 dans la boîte 1. Cela fonctionne correctement. Si vous utilisez Firefox, vous pouvez voir la boîte telle qu'elle est ajoutée à la case 1 au passage de la souris.

Le problème que j'ai est lors de la création de la boîte 3, en le déplaçant sur la boîte 2 et en essayant de le déposer à l'intérieur. Il ne détecte que la case 1 et la laisse tomber.

Y a-t-il une astuce qui me manque pour que jQuery détecte la boîte 2 lorsque la boîte 3 est déplacée dessus, et qu'elle soit ajoutée à la place?

Answer 1

J'ai juste eu un moment de clarté après avoir lutté avec la documentation clairsemée de jQuery UI (ahem). L'option droppable 'greedy' détermine où un objet atterrira quand il tombera sur un arbre d'objets droppables.

Lorsqu'il est défini sur false (valeur par défaut), l'objet déposé atterrit sur l'objet droppable le plus bas de l'arborescence. Lorsque ce paramètre est défini sur true, l'objet déposé atterrit sur le premier objet droppable de l'arborescence (c'est-à-dire le plus élevé).

Ceci peut être démontré en utilisant le marquage suivant à titre d'exemple. Imaginez les divs suivants sont des objets largables ...

<div id="bottom_container"> 
    <div id="level_2_container"> 
     <div id="level_3_container"> 
     </div> 
    </div> 
</div> 

Un objet draggable (donné id = "de all_new_container" ci-dessous) est tombé sur div # level_3_container. Voici le balisage qui en résulte si avide est faux (la valeur par défaut) ...

<div id="bottom_container"> 
    <div id="level_2_container"> 
     <div id="level_3_container"> 
     </div> 
    </div> 
    <div id="all_new_container"> 
    </div> 
</div> 

Et voici le balisage qui en résulte si avide est à true ...

<div id="bottom_container"> 
    <div id="level_2_container"> 
     <div id="level_3_container"> 
      <div id="all_new_container"> 
      </div> 
     </div> 
    </div> 
</div> 

Si vous avez Firebug vous regardez le happening ci-dessus que vous déposez des objets dans d'autres objets ici ... http://acarna.com/editor.php

S'il vous plaît excuser le bug de positionnement qui a de nouveaux éléments a chuté terre au mauvais endroit au-delà de niveau 2. Je ne vais pas dans la fixation qui exemple ci-dessus, un d il n'est pas nécessaire de le faire pour la démonstration ci-dessus.