向下拖動鼠標以顯示面板？ （使用MooTools）

Question

我有一個簡單的DIV面板，當用戶單擊並拖動一個較小的選項卡時，我想滑入該面板。有很多教程用於顯示點擊和滑動元素等，但這需要用戶點擊一下按鈕來顯示面板。

Answer 1

據我瞭解，你需要這樣的事：http://jsfiddle.net/steweb/pvdXa/

我做的這個最小模擬式..

標記：

<div id="handler"></div> <!-- your 'tab' to drag --> 
<div id="toSlide">content to be revealed</div> <!-- content to slide in/out --> 

JS：

var toSlide = document.id('toSlide'); //get the content div 
document.id('handler').makeDraggable({ 
    limit:{x:[10,10],y:[10]}, //setting limits 
    onDrag:function(elem){ //while user drags, set the content height 
     toSlide.setStyle('height',elem.offsetTop-10); 
    } 
}); 

希望它有幫助:)

Answer 2

爲了可用性，我會添加點擊和拖動。我不會提供代碼，如果你想這樣做是複雜的插件「正確」;）

Drag有onCancel事件，在這裏你可以檢查用戶是否實際開始拖動或者只是單擊或長按可拖動元素。

對於拖動，您可以a）設置一個限制，因此用戶不會完全打開該元素，或者b）在打開x像素的滑塊後停止拖動，並用動畫滑動其餘部分。這樣，它就像您從手機中瞭解的觸摸滑塊，初始的短觸摸幻燈片啓動打開下拉菜單/導航。