向下拖动鼠标以显示面板？ （使用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像素的滑块后停止拖动，然后滑动剩下的部分动画。这种方式就像你从手机上看到的触摸滑块，初始的短触摸滑动启动打开下拉/菜单/导航。