jQuery сбрасываемый аккордеон

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

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

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

Спасибо!


jquery jquery-ui jquery-ui-accordion
person awshepard    schedule 03.05.2010    source источник

Ответы (1)


arrow_upward
5
arrow_downward

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

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

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

});
person Mottie    schedule 04.05.2010
comment
Абсолютно эпично. Демонстрация выглядит великолепно — я посмотрю, смогу ли я это втиснуть! Спасибо большое! - person awshepard; 04.05.2010