jQuery droppable accordion

Question

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

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

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

Спасибо!

Answer 1

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

Ключ к этому случаю связывает событие 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> 

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

});