Вернуть или выполнить функцию в jQuery UI

Question

Я пытаюсь вернуть элемент в исходное положение, если он не был перемещен более чем на определенное расстояние. Если элемент был перетащен более чем на заданное расстояние по оси X, я хочу выполнить функцию, которая вытащит перетаскиваемый элемент из области просмотра и задвинет его обратно. Я получил его для отслеживания расстояния, но теперь он как-то не будет вернуть функцию как true или false, если условие не выполнено... Я получаю ошибку с D undefined. Кто-нибудь знает, что может быть не так?

Я пробовал разные решения, но не смог заставить ни одно из них работать, и не смог найти ответ в Интернете.

Это то, что я сделал до сих пор: 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

Вы массово переусердствовали. Измерение пройденного расстояния по одной оси довольно тривиально:

revert: function() {
    var orig = $(this).data("uiDraggable").originalPosition.left;
    var curr = $(this).data("uiDraggable").position.left;
    return curr - orig > 100;
}

Смотрите рабочее обновление на вашей скрипке

Обратите внимание, что название data Объект отличается для разных версий jQueryUI. Для того, кого вы выбрали в скрипке, это draggableдля новых это uiDraggable,

---

В вашем коде есть ряд других ошибок, которые я прокомментировал в скрипте:

• Вы на самом деле не окружили код, который вы хотели поместить в revert в function(){}
• Связыватели событий и асинхронные обратные вызовы не работают так, как вы предполагаете в mousedown а также mouseup, d переменная в вашем d>100 состояние всегда будет undefined
• Это вообще плохая форма, чтобы использовать селектор (".video") внутри обработчика событий, когда вы можете получить тот же объект с this или же event.currentTarget,
• Не заканчивайте последнее свойство в объекте запятой. Интернет-исследователь случайно решает ненавидеть это.

Резюме? Проверка кода - ваш друг, не забывайте о нем!:)