accordéon tombant en jQuery

Question

Je m'amuse depuis un moment à essayer de créer un accordéon déroulable, mais je n'ai pas réussi à le rendre très réactif. Lorsque je fais glisser un élément sur l'accordéon, il faut plus de 5 secondes pour que l'élément en accordéon s'ouvre (s'il s'ouvre tout court). Parfois, je dois "faire glisser" l'élément glissé sur l'élément en 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 du genre le navigateur ne passe pas toujours le contrôle au moteur javascript quand vous pensez qu'il le fait, ou quelque chose comme ça, ce qui entraîne un timing bizarre.

Quelqu'un d'autre a-t-il déjà essayé de le faire ? Avez-vous constaté que jquery/javascript est aussi lent ? Avez-vous des références sur la façon d'obtenir un accordéon réactif (le site de jQuery UI ne semble pas le faire, et je n'ai rien trouvé sur SO ou Google).

Merci !

Answer 1

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

La clé est d'utiliser le dropover événement de liaison ajouté par le .droppable() script. Mais, ce n'est pas parfait parce que la hauteur de l'accordéon fermé est toujours utilisée lorsque l'événement dropover est appelé, donc l'en-tête fonctionne bien pour déposer l'élément, mais la liste cachée en dessous ne s'enregistre pas toujours et l'accordéon se ferme. Vous devrez renvoyer l'élément glissant et recommencer. Vous verrez ce que je veux dire lorsque vous vous amuserez 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');
  }
 });

});