Эффект резиновой ленты JS, кто-нибудь?

Question

Учитывая div "square" и учитывая, что у меня уже есть функция 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);​