使用jQuery在iOS上的可拖动元素

Question

我正在尝试制作一个可以在容器中显示项目的迷你可拖动元素，这样用户可以在拖动时拖动项目以查看右侧的其他项目。

这就是目前的样子：

当用户拖动它时，它应该显示右边的其他框（10,11,12,13等......），白框作为容器，但我的代码似乎让它拖入反方向，例如，如果用户向右拖动，方框向左移动，向左方向向右移动。

向左拖动时：

向正确方向拖动时：

这是我的代码：

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);
});

我想要的是当盒子到达容器的末端时阻止盒子滚动如果盒子0在左边缘那么它不应该再向左拖动了除了要向正确的方向拖动外，最后一个框不应该继续拖动。

我怎样才能做到这一点？我不想包含任何移动插件（jQuery，Sencha等）。

编辑：

我的来源：

.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

看起来你的标志已被颠倒了。然后添加一个检查以查看滚动是否超过最大滚动值（内容宽度 - 显示区域宽度），如果是，则将其设置为最大值。较低的阈值更容易（0）。

编辑：刚刚意识到您可能想要将当前位置添加到滚动偏移中。编辑的例子。

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);

});

点击jQuery中的版本：http://jsfiddle.net/Gcgpg/6/