Comment déboguer un élément jjuery hiérarchisé sortable draggable?

La première partie vous permet de glisser d'abord un élément dans un Div divable, qui fonctionne bien. Je veux ensuite que ce div soit également sorti, de sorte que je peux faire de nouveaux éléments (parties) dans ceux-ci.

Cette partie fonctionne bien aussi, sauf si vous réorganisez les éléments (les plus foncés), il ne vous permettra pas de remettre une partie en place jusqu'à ce que vous les réorganisez ou essayez de le placer dans l'un des autres éléments et de revenir à il.

C'est un peu difficile à expliquer, mais voici un écran: http://screencast.com/t/Ls2ksVY4Q

La démo est à: http://jsfiddle.net/9MXWp/

Voici le code pertinent:

$(document).ready(function() { $('#the-grid').sortable({ tolerance: 'pointer', update: function(event, ui) { if( $(ui.item).has('.close').length == 0 ) { $(ui.item).prepend('<a href="#" class="close" onclick="$(this).parent().remove();">x</a>'); } $('.part-holder', ui.item).sortable({ tolerance: 'pointer', update: function(event, ui) { if( $(ui.item).has('.close').length == 0 ) $(ui.item).prepend('<a href="#" class="close" onclick="$(this).parent().remove();">x</a>'); } }); } }); $('#sidebar > ul > li.part').draggable({ helper: 'clone', connectToSortable: '.part-holder', addClasses: false }); $('.drag-element').draggable({ revert: 'invalid', helper: 'clone', connectToSortable: '#the-grid', addClasses: false }); $('#update-list').click(updateList); });

Une recette qui semble doubler le problème (en FF 3.6):

Faites glisser l' élément 1 vers la zone de montage.
Faites glisser l' élément 2 vers la zone d'essai; Placez-le avant l'élément 1.
Faites glisser une pièce dans l' élément 1 . ☞ Parfois, la page échouera ici. ☜ ☣
Faites glisser une pièce à l' intérieur de l' élément 2 .
Maintenant, faites glisser l' élément 2 pour être après l' élément 1 .
☞ Faites glisser une partie dans l' élément 1 ; Ça ne fonctionnera pas. ☜ ☣
Faites glisser une pièce à l' intérieur de l' élément 2 ; Cela fonctionnera, et maintenant Element 1 accepte les pièces à nouveau.

Ok, réessayez; J'ai ajouté une option 'connectWith', puis j'ai réinstallé l'initialiseur débitéable '.part-holder' afin qu'il ne soit pas mis à jour chaque fois que la grille est réordonnée …

 $(document).ready ( function() { $('#the-grid').sortable ( { tolerance: 'pointer', update: function (event, ui) { if( $(ui.item).has('.close').length == 0 ) { $(ui.item).prepend('<a href="#" class="close" onclick="$(this).parent().remove();">x<\/a>'); } if($(ui.item).has('.part-holder.ui-sortable').length == 0) { $('.part-holder', ui.item).sortable({ tolerance: 'pointer', connectWith: '.part-holder', update: function(event, ui) { if( $(ui.item).has('.close').length == 0 ) $(ui.item).prepend('<a href="#" class="close" onclick="$(this).parent().remove();">x</a>'); } }); } else { // don't recreate } } } ); $('#sidebar > ul > li.part').draggable ( { helper: 'clone', connectToSortable: '.part-holder', addClasses: false } ); $('.drag-element').draggable ( { revert: 'invalid', helper: 'clone', connectToSortable: '#the-grid', addClasses: false } ); $('#update-list').click (updateList); } ); function updateList() { $('#current-list').empty(); $('#the-grid > li').each( function(index, value) { $('#current-list').append('<li>' + $(value).html() + '<\/li>'); }); }

Avec ces changements, vous pouvez ajouter les «pièces» aux «parties prenantes». J'ai vu des erreurs js intermittentes … Je ne sais pas pourquoi elles apparaissent, mais elles ne semblent pas interférer avec le fonctionnement de la page lorsqu'elles sont visionnées avec FF 3.6

Je suis d'accord avec Nick P en ce que je pense que c'est un bogue de sorbitat. Les autres éléments en cours de tri perdent la capacité de tri lors du tri des finitions.

J'ai ajouté

 $('.part-holder').sortable('refresh');

avant

 $('.part-holder', ui.item).sortable({

Qui a fonctionné pour moi dans Chrome 11, FF3.7 et FF4.0b12pre.

Il semble que vous ayez découvert un bogue dans le classement … Une solution de contournement potentielle consiste à recréer le ".part-holder" sorable chaque fois qu'il est ré-commandé …

 $('.part-holder', ui.item).sortable('destroy');

Mettre ce droit au-dessus

 ... $('.part-holder', ui.item).sortable({ ...

C'est un hack, mais bon, ça marche … 🙂