jQuery droppable accordion

Question

I've been playing around with trying to create a droppable accordion for a little while, and haven't gotten it to be very responsive. When I drag an item over the accordion, it takes 5+ seconds for the accordion element to open (if it does at all). Sometimes I have to "wave" the dragged element over the accordion element.

I know I read something a while back about event processing in javascript - something along the lines of the browser not always passing control to the javascript engine when you think it does, or something like that, resulting in weird timing.

Has anyone else seen tried to do this before? Have you found jquery/javascript to be this slow? Do you have any references for how to get a responsive droppable accordion (the jQuery UI site doesn't seem to, and I didn't find anything on SO or Google).

Thanks!

Answer 1

Hiya! I posted a demo where you can drag a list item and place it into an accordion menu.

The key to it is using the dropover bind event added by the .droppable() script. But, it's not perfect because the closed accordion height is still used when the dropover event is called, so the header works great for dropping the item, but the hidden list beneath it doesn't always register and the accordion closes. You'll have to return the draggable item and start again. You'll see what I mean when you mess around with the demo. Anyway, here is the basic setup:

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');
  }
 });

});