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!
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).
One option would be to use jQuery UI's draggable feature.
http://jqueryui.com/demos/draggable/