jQuery droppable accordéon

Question

J'ai essayé de créer un accordéon droppable pendant un petit moment et je n'ai pas réussi à le rendre très réactif. Quand je fais glisser un objet sur l'accordéon, il faut 5+ secondes pour que l'élément accordéon s'ouvre (s'il le fait). Parfois, je dois "vague" l'élément traîné sur l'élément accordéon. Je sais que j'ai lu quelque chose il y a quelque temps à propos du traitement des événements en javascript - quelque chose dans le sens du navigateur ne passant pas toujours le contrôle au moteur javascript lorsque vous le pensez, ou quelque chose comme ça, entraînant un timing bizarre.

Est-ce que quelqu'un d'autre a déjà essayé de le faire? Avez-vous trouvé jquery/javascript pour être aussi lent? Avez-vous des références sur la façon d'obtenir un accordéon droppable responsive (le site de l'interface utilisateur jQuery ne semble pas, et je n'ai rien trouvé sur SO ou Google).

Merci!

Answer 1

Hiya! J'ai posté un demo où vous pouvez faire glisser un élément de la liste et le placer dans un menu accordéon.

La clé de ce problème est l'utilisation de l'événement de liaison dropover ajouté par le script .droppable(). Mais ce n'est pas parfait parce que la hauteur d'accordéon fermée est toujours utilisée lorsque l'événement dropover est appelé, donc l'en-tête fonctionne bien pour laisser tomber l'élément, mais la liste cachée ne l'enregistre pas toujours et l'accordéon se ferme. Vous devrez retourner l'objet déplaçable et recommencer. Vous verrez ce que je veux dire quand vous dérangez avec la démo. Quoi qu'il en soit, voici la configuration de base:

CSS

#droppable { width: 250px; height: 500px; padding: 0.5em; float: left; margin: 10px; background: #ddd; color:#000; } 
#draggable { width: 250px; height: 500px; padding: 0.5em; float: left; margin: 10px; background: #999; color:#000; } 
.fade { opacity: 0.3; } 

ul#droppable { list-style-type: none; } 
#droppable h5 { background: #08f; color: #fff; margin: 5px 0; padding: 3px; font-size: 14px; } 
#droppable .item, .item ul li { padding: 0 5px; background: #ccc; } 

HTML

<ul id="droppable"> 
<li class="item selected"> 
    <h5>Header #1</h5> 
    <ul> 
    <li>Item #1.1</li> 
    <li>Item #1.2</li> 
    </ul> 
</li> 
<li class="item"> 
    <h5>Header #2</h5> 
    <ul> 
    <li>Item #2.1</li> 
    <li>Item #2.2</li> 
    </ul> 
</li> 
</ul> 

Script

$(document).ready(function(){ 

// make accordion 
var item = $('#droppable li.item'); 
// dropover event is for droppable 
item.bind('mouseover dropover', function(){ 
    item.removeClass('selected'); 
    $(this).addClass('selected').find('ul').slideDown(300); 
    item.not('.selected').find('ul').slideUp(300); 
}).not('.selected').find('ul').hide(); 

// set up droppable 
item.droppable({ 
    drop: function(e,ui) { 
    ui.draggable.appendTo($(this).find('ul')); 
    ui.helper.remove(); 
    } 
}); 

// set up draggable 
$('#draggable li').draggable({ 
    helper : 'clone', 
    revert : true, 
    start: function(e,ui){ 
    $(this).addClass('fade'); 
    ui.helper.css('background','#ddd'); 
    }, 
    stop: function(e,ui){ 
    $(this).removeClass('fade'); 
    ui.helper.css('background','transparent'); 
    } 
}); 

});