jQuery可投手風琴

Question

我一直在試圖創造一個可以投入使用的手風琴一段時間，並沒有得到它非常敏感。當我在手風琴上拖動一個項目時，需要5秒鐘才能打開手風琴元素（如果有的話）。有時我必須在手風琴元素上「拖動」拖動的元素。

我知道我讀了一些關於JavaScript中的事件處理的東西 - 一些沿着瀏覽器行的東西，當你覺得它的確如此，或者類似的東西時，並不總是將控制權交給javascript引擎，從而導致奇怪的時機。

有沒有其他人見過試圖做到這一點？你有沒有發現jQuery/JavaScript是這樣慢？你有沒有關於如何得到一個響應可拖拽手風琴（jQuery用戶界面網站似乎沒有任何參考，而我沒有找到任何關於SO或谷歌）。

謝謝！

Answer 1

嗨！我發佈了一個demo，您可以拖動一個列表項並將其放入手風琴菜單。

它的關鍵是使用由.droppable()腳本添加的dropover綁定事件。但是，這並不完美，因爲在調用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'); 
    } 
}); 

});