Question

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

如何实施橡皮筋效果？

我的意思是：点击并向左拖动，直到阻力达到极限，如果释放手指，square div会回到初始位置，并带有缓动动画

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

更新

如果可能，没有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);

JS橡皮筋效应，有谁？

1 个答案: