JQuery user interface only drag left

Question

How to drag an item only to the left and only for X pixels?

Obviously using jQuery UI is Draggable.

I tried something like

$('li').draggable({
    axis: 'x',
    containment: [0,0,-250,250]
});

But he does not do what I want.

EDIT: JSFiddle: http://jsfiddle.net/MJvn8/

Answer 1

This can be done with:

var startPosition = 0;
$('li').draggable({
    axis: 'x',
    start: function( event, ui ) {
        startPosition = ui.position.left;
    },
    drag: function( event, ui ) {
        if(ui.position.left > startPosition)
            ui.position.left = startPosition;
        if(ui.position.left < -250)
            ui.position.left = -250;
        startPosition = ui.position.left;
    }
});

Check out this example.

Update

So that the user can return to the original position Link