JS橡皮筋效应，有人吗？

Question

给定一个div "square" 并且鉴于我在该 div 上已经有一个 touchmove 函数，我可以实时检测位置 X：

如何实现橡皮筋效果？

我的意思是：点击并向左拖动直到阻力达到极限，如果您松开手指，square div 会以缓动动画返回其初始位置

有一个简单的数学吗？还是插件？

更新

如果可能的话，w/o jquery 会更好

Answer 1

将其原始位置存储在某处。

然后在dragend事件上：

$(this).animate({
    top: original_top,
    left: original_left
}, 'slow');

演示：http://jsfiddle.net/maniator/T8zYt/

完整代码（使用 jQuery draggable）：

(function($) {
    $.fn.rubber = function(resist) {

        var self = this,
            position = $(this).position(),
            selfPos = {
                top: position.top,
                left: position.left,
                maxTop: resist + position.top,
                maxLeft: resist + position.left,
                minTop: resist - position.top,
                minLeft: resist - position.left
            };
        self.draggable({
            drag: function() {
                var position = $(this).position(), width = $(this).width(),  height = $(this).height();
                if (position.left > selfPos.maxLeft || (position.left - width)  < selfPos.minLeft || position.top > selfPos.maxTop || (position.top - height) < selfPos.minTop) {
                    return false;
                }
            },
            stop: function() {
                $(this).animate({
                    top: selfPos.top,
                    left: selfPos.left
                }, 'slow');
            }
        })

    };
})(jQuery)

$('selector').rubber(10);​