Revert or execute function in jQuery UI - jquery-ui

Question

I'm looking to revert the element to it's original position if it hasn't been dragged by more than a certain distance.
If the element has been dragged by more than the set distance on axis X I want to execute a function that will slide the dragged element out of the viewport and slide it back in. I got it to track the distance but now it somehow won't return function as true or false if the condition is not met... I get an error with D undefined. Does anyone know what could be wrong?
I have tried different solutions, but couldn't get neither one of them to work and wasn't able to find an answer on the web.
This what I have done so far: http://jsfiddle.net/DzEu2/4/
$(".video").draggable({
revert: $("#video").mousedown(function (e) {
$(this).data('p0', {
x: e.pageX,
y: e.pageY
});
}).mouseup(function (e) {
p0 = $(this).data('p0'),
p1 = {
x: e.pageX,
y: e.pageY
},
d = Math.sqrt(Math.pow(p1.x - p0.x, 2) + Math.pow(p1.y - p0.y, 2));
});
if (d > 100) {
return false;
} else {
return true;
}
start: function (event) {
x = event.originalEvent.pageX;
y = event.originalEvent.pageY;
console.log(x, y);
},
drag: function (event) {
if (x && y) {
axis = Math.abs(event.originalEvent.pageX - x) > Math.abs(event.originalEvent.pageY - y) ? 'x' : 'y';
$(".video").draggable('option', 'axis', axis);
x = y = null;
}
},
stop: function () {
x = y = null;
$(".video").draggable('option', 'axis', false);
},
distance: 20,
});

Answer 1

You are massively overdoing it. Measuring distance travelled on a single axis is rather trivial:
revert: function() {
var orig = $(this).data("uiDraggable").originalPosition.left;
var curr = $(this).data("uiDraggable").position.left;
return curr - orig > 100;
}
See a working update on your fiddle
Note that the name of the data object is different for different versions of jQueryUI. For the one you selected in the fiddle, it's draggable, for newer ones it's uiDraggable.
There are a number of other errors in your code, which I commented out in the fiddle:
You haven't actually surrounded the code you meant to put in revert in a function(){}
Event binders and asynchronous callbacks don't work like what you assume in mousedown and mouseup. The d variable in your d>100 condition will always be undefined
It's generally bad form to use a selector (".video") inside an event handler, when you can get the same object with this or event.currentTarget.
Don't end the last property in an object with a comma. Internet explorer randomly decides to hate that.
Summary? Code reviewing is your friend, don't forget about him! :)