Question

I’m trying to make a mini draggable element that will show items in a container, that way the user can drag the items to view the other items on the right when when dragging.

This is what it looks like at the moment:

When the user drags it, it should reveal the other boxes on the right (10, 11, 12, 13, etc…) with the white box as the container, but my code seems to make it drag in the reverse direction, for example, if the user drags in right direction, the boxes go left direction and left direction goes the right direction.

When dragging into the left direction:

When dragging into the right direction:

This is my code:

var firstTouch;
$('.scroll-wrapper').bind('touchstart touchmove', function(event)
{
    if(event.type == 'touchstart')
    {
        firstTouch = event.originalEvent.touches[0].pageX;  
    }

    var scrollAmount = firstTouch - event.originalEvent.touches[0].pageX;

    $(this).css('left', scrollAmount);
});

What I would like to also have is to stop the boxes from scrolling when it has reached the end of the container if the box 0 is at the edge of the left then it should not be able to drag into the left direction anymore except to be dragged in the right direction, same goes for the last box should not continue to drag.

How can I accomplish this? I do not want to include any mobile plugins (jQuery, Sencha, etc).

EDIT:

My source:

.scroll-area {
    height: 30px;
    overflow: visible; 
    position: relative; 
    z-index: 1; 
}

.scroll-area .scroll-wrapper {
    height: 30px;
    position: absolute;
    left: 0;
    top: 0; 
}

.scroll-area .scroll-wrapper .item {
    float: left;
    height: 30px;
    width: 30px;
    background-color: #F00;
    margin: 2px;    
}

<div class="scroll-area">
    <div class="scroll-wrapper">
        <div class="item">0</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 class="item">8</div>
        <div class="item">9</div>
        <div class="item">10</div>
        <div class="item">11</div>
        <div class="item">12</div>
        <div class="item">13</div>
        <div class="item">14</div>
        <div class="item">15</div>
        <div class="item">16</div>
        <div class="item">17</div>
        <div class="item">18</div>
        <div class="item">19</div>
        <div class="item">20</div>
        <div class="item">21</div>
        <div class="item">22</div>
        <div class="item">23</div>
        <div class="item">24</div>
        <div class="item">25</div>
    </div>
</div>

Answer 1

Looks like you just have your sign reversed. Then add a check to see if the scroll is over the maximum scroll value (content width – display area width), and set it to maximum if it does. The lower threshold is easier (0).

Edit: Just realized you probably want to add your current position to your scroll offset. Example edited.

var firstTouch;
var drag = 0;
var startPos = 0;

// Maximum scroll value to (swiping left), minimum is 0
var maxScroll = $('.scroll-wrapper').outerWidth() - $('.scroll-wrapper').parent().innerWidth();

$('.scroll-area').on('touchstart touchmove', '.scroll-wrapper', function(event) {
    event.preventDefault();

    if (event.type == 'touchstart') {
        firstTouch = event.originalEvent.touches[0].pageX;
        startPos = parseInt($(this).css('left'));
        if (isNaN(startPos)) {
            startPos = 0;
        }
    }

    // current - first, not the other way around
    // This is negative for swiping left
    var scrollAmount = event.originalEvent.touches[0].pageX - firstTouch;

    var offset = startPos + scrollAmount;


    if (-offset > maxScroll) {
        offset = -maxScroll;
    } else if (offset > 0) {
        offset = 0;
    }
    $(this).css('left', offset);

});

Click version in jQuery: http://jsfiddle.net/Gcgpg/6/