JQuery аккордеон

Question

Я немного поигрался с попыткой создать броский аккордеон на некоторое время, и не получил его очень отзывчивым. Когда я перетаскиваю элемент над аккордеоном, для открытия элемента аккордеона требуется более 5 секунд (если он вообще открывается). Иногда мне приходится "махать" перетаскиваемым элементом над элементом аккордеона.

Я знаю, что некоторое время назад читал об обработке событий в javascript - что-то вроде браузера не всегда передавало управление движку javascript, когда вы думаете, что это происходит, или что-то подобное, что приводило к странной синхронизации.

Кто-нибудь еще видел пытался сделать это раньше? Вы нашли jquery/javascript таким медленным? Есть ли у вас какие-либо рекомендации по поводу того, как получить отзывчивый аккордеон с поддержкой отзывчивости (судя по всему, на сайте jQuery UI я ничего не нашел в SO или Google).

Спасибо!

Answer 1

Hiya! Я разместил демо, где вы можете перетащить элемент списка и поместить его в меню аккордеона.

Ключом к этому является использование dropover событие связывания, добавленное .droppable() скрипт. Но это не идеально, потому что высота закрытого аккордеона все еще используется, когда вызывается событие dropover, поэтому заголовок отлично подходит для отбрасывания элемента, но скрытый список под ним не всегда регистрируется, и аккордеон закрывается. Вам придется вернуть перетаскиваемый элемент и начать заново. Вы поймете, что я имею в виду, когда возитесь с демо. Во всяком случае, вот основные настройки:

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>

скрипт

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

});