Question

I’m trying to add a draggable element to my page, using the draggable jquery ui plugin ( http://jqueryui.com/demos/draggable/ ). At the moment I have this:

$("#makeMeDraggable").draggable({ axis: "y"});

I already tried:

$("#makeMeDraggable").draggable({ axis: "y",  limit: {top: 10, bottom: 550}});

What I need is only to allow drag vertically – but only upwards (Disallowing dragging downwards).

Answer 1

try this code:

$("#makeMeDraggable").draggable({ axis: "y"});

var lastYPosition = null;

$("#makeMeDraggable").draggable({
   drag: function(event, ui) {

       // set with the initial y position
       if(lastYPosition === null) {
           lastYPosition = ui.originalPosition.top;           
       }

       // don't do the drag if the new y position is larger than the old one
       if(ui.position.top > lastYPosition) {
           return false;   
       }

       // update the last y position with current value
       // so we can check against it next time
       lastYPosition = ui.position.top;
   }
});

And here is a working example: (tested in Chrome and Safari)
http://jsfiddle.net/jameszaghini/s4vfX/