在 jQuery UI 中恢复或执行函数答案

【问题标题】：Revert or execute function in jQuery UI在 jQuery UI 中恢复或执行函数
【发布时间】：2014-06-13 07:14:07
【问题描述】：

如果元素没有被拖动超过一定距离，我希望将元素恢复到其原始位置。如果元素在 X 轴上被拖动的距离超过了设定的距离，我想执行一个函数，将拖动的元素滑出视口并将其滑回。我让它跟踪距离，但现在它不知何故不会如果不满足条件，则将函数返回为真或假...我收到 D 未定义的错误。有谁知道可能出了什么问题？

我尝试了不同的解决方案，但其中任何一个都无法正常工作，也无法在网络上找到答案。

这是我到目前为止所做的：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,
});

【问题讨论】：

标签： jquery-ui undefined draggable revert

【解决方案1】：

你做得过火了。测量在单轴上行驶的距离相当简单：

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

查看工作中的update on your fiddle

请注意，data 对象的名称对于不同版本的 jQueryUI 是不同的。对于您在小提琴中选择的那个，它是draggable，对于较新的它是uiDraggable。

您的代码中还有许多其他错误，我在小提琴中注释掉了：

您实际上并没有将您要放入 revert 的代码包围在 function(){} 中
事件绑定器和异步回调不像您在mousedown 和mouseup 中假设的那样工作。 d>100 条件中的 d 变量将始终为 undefined
当您可以使用this 或event.currentTarget 获取相同的对象时，在事件处理程序中使用选择器 (".video") 通常是一种不好的形式。
不要以逗号结束对象中的最后一个属性。 Internet Explorer 随机决定讨厌它。

总结？代码审查是你的朋友，不要忘记他！ :)

【讨论】：