Потянув мышку вниз, чтобы открыть панель?(используя 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, где вы можете проверить, действительно ли пользователь начал перетаскивать или простощелкнул или долго щелкнул перетаскиваемый элемент.

Для перетаскивания вы можете а) установить предел, чтобы пользователь не открывал элемент полностью, или б) прекратить перетаскивание после открытия ползунка для x пикселей и скольжения до конца с анимацией.Таким образом, он работает подобно сенсорному слайдеру, который вы знаете по мобильным телефонам, когда первоначальный слайд с коротким касанием инициирует открытие выпадающего меню / меню / навигации.