Power By 专否社区

How do I create div that can be dragged up to reveal content?

Go To StackoverFlow.com

1

I have a div with an image and some text. I want the whole div to be draggable, but only upwards. When the visitor drags the div upwards with their mouse, there is content under the div, that doesn't move. That means that that content is already there. The draggable div is overlapping it. A good example of what I want to do is the Microsoft Windows 8 lock-screen. You drag up, and the login screen is under it. Thanks!

2012-04-04 17:02
by PrplNinja
Try jQuery + jQueryUI: http://jqueryui.com/demos/draggable/ there you have some examples that are almost exactly to what you are askin - aurbano 2012-04-04 17:05
You asked the exact same question a few minutes ago, and it got closed. How to create div that can be dragged up to reveal content?Christofer Eliasson 2012-04-04 17:05
yes, but it got closed while i was editing it and fixing it. it wasn't a question when i first wrote it - PrplNinja 2012-04-04 17:07

1

I was trying to do something very similar to your problem not a while ago. If you want an element which can be dragged up use the axis option in the draggable() tool in jQuery UI. You would need:

$(document).ready(function() {
    $("div").draggable({
        axis: "y"
    });
});

This defines it as draggable, and only on the Y-axis (vertical).

2012-12-01 18:40
by randmath
See jQuery Draggable UI API for more options - randmath 2012-12-01 18:41
WOAH! I just realized this is from April 4th. Lol X - randmath 2012-12-01 18:43

0

One option would be to use jQuery UI's draggable feature.

http://jqueryui.com/demos/draggable/

2012-04-04 17:05
by Philip Kirkbride
That lets the div be dragged around anywhere. I want the div to fill the screen. Then it can be dragged UP out of the screen - PrplNinja 2012-04-04 17:09
Ads