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

Question

我正在試圖製作一個迷你可拖動元素，它將在容器中顯示項目，這樣用戶可以在拖動時拖動項目以查看右側的其他項目。

這是它看起來像此刻：

當用戶拖動它，它應該顯示在右邊（10，11，12，13，等其他框.. 。）以白色方塊作爲容器，但是我的代碼似乎會使其沿相反方向拖動，例如，如果用戶向右拖動，則方框向左方向，向左方向朝右方向拖動。

當拖動到左方向：

當拖動到正確的方向：

這是我的代碼：

​​

我想也有是當盒子到達容器的末端時停止滾動，如果盒子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/