jQueryを使用したiOSのドラッグ可能な要素

Question

コンテナ内にアイテムを表示するミニドラッグ可能な要素を作成しようとしています。ドラッグすると、アイテムをドラッグして右側の他のアイテムを表示できます。

これは、それが現時点では次のようになります。ユーザーがそれをドラッグすると

、それは（右に10、11、12、13、などを他のボックスを明らかにする必要があります。..私のコードは逆方向にドラッグするように見えます。たとえば、ユーザーが右方向にドラッグすると、ボックスは左方向に移動し、左方向は右方向に移動します。

左方向へドラッグ：

右方向にドラッグすると：

これは私のコードです：

​​

私は何をまた持っていたいボックス0が左端にある場合、ボックスのスクロールを停止することです。ボックス0が左端にある場合は、右方向にドラッグする以外は左方向にドラッグすることはできません。最後のボックスのために行くドラッグし続けるべきではありません。

どうすればこの問題を解決できますか？私はモバイルプラグイン（jQuery、Senchaなど）を含めたくありません。

EDIT：

マイソース：あなたは自分の符号が逆転しているよう

.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）。

編集：現在の位置をスクロールオフセットに追加したいと思っています。編集例

jQueryので

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

}); 

クリックしてバージョン：http://jsfiddle.net/Gcgpg/6/