Question

Given a div "square"
and given I already have a touchmove function on that div and I can detect the position X in real time:

how can I implement the rubber band effect?

I mean: tap and drag to the left until the resistance reach the limit and if ou release the finger the square div goes back to its initial position with an easing animation

there is a simple math for that? or a plugin?

UPDATE

w/o jquery would be better if possible

Answer 1

Store its original position somewhere.

Then on the dragend event:

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

Demo: http://jsfiddle.net/maniator/T8zYt/

Full code (with 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);​