JS 橡皮筋效果，有人知道吗？

Question

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

如何实现橡皮筋效果？

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

有一个简单的数学吗？或者插件？

如果可能的话，不使用jquery更新

会更好

Answer 1

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

然后在拖尾事件上：

$(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);​