touch carousel

HTML

<div class="carousel">
    <div class="carousel-stage">
        <div class="item">1</div>
        <div class="item">2</div>
        <div class="item">3</div>
        <div class="item">4</div>
        <div class="item">5</div>
        <div class="item">6</div>
        <div class="item">7</div>
            <div class="item">1</div>
        <div class="item">2</div>
        <div class="item">3</div>
        <div class="item">4</div>
        <div class="item">5</div>
        <div class="item">6</div>
        <div class="item">7</div>
    </div>
</div>

CSS

.carousel {
    max-width:400px;
    height:100px;
    font-size:0;
    border:2px solid blue;
    overflow:hidden;
}
.carousel-stage {
    white-space:nowrap;
}
.item {
    width:98px;
    height:98px;
    background:#ccc;
    font-size:20px;
    display:inline-block;
    border:1px solid #222;
    text-align:center;
}

JavaScript

$.fn.draggable = function() {
      var offset = null;
      var start = function(e) {
        var orig = e.originalEvent;
        var pos = $(this).position();
        offset = {
          x: orig.changedTouches[0].pageX - pos.left
        };
      };
      var moveMe = function(e) {
        e.preventDefault();
        var orig = e.originalEvent,
            newX = orig.changedTouches[0].pageX - offset.x,
            total = ($('.affiliate-stage').outerWidth())*-1,
            posX = $('.affiliate-stage').css('left');

            if (posX) {
	            $('.affiliate-stage').css({
	              left: '+='+ newX
	            });
        	} else {

        	}
      };
      this.bind("touchstart", start);
      this.bind("touchmove", moveMe);
    };
	$(".carousel-stage").draggable();