向下拖动鼠标以显示面板？ （使用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像素的滑块后停止拖动，并用动画滑动其余部分。这样，它就像您从手机中了解的触摸滑块，初始的短触摸幻灯片启动打开下拉菜单/导航。