使用touchmove/mousemove時左側位置不準確

我一直在開發一個側邊欄，它應該允許用戶拖動綠色選項卡來展開和摺疊邊欄。我相信這主要是在那裏，但是當拖動邊欄時，由於我認爲是不準確的位置（）。左值，用戶遇到了一些阻力。使用touchmove/mousemove時左側位置不準確

如果您將＃side-panel上的過渡時間減少到CSS中的5ms，則面板跳躍更加明顯。

var sidebar = (function(){ 

    var $document = $(document), 
     $panel = $('#side-panel'), 
     $tab = $panel.find('.btn'), 
     panelWidth = $panel.width(), 
     lastPanelPos = 0, 
     panelOpen = false, 
     hasTouch = false; 

    var eventTypes = { 
     eventStart: "mousedown", 
     eventEnd: "mouseup", 
     eventMove: "mousemove" 
    }; 

    if($('html').hasClass('touch')){ 

     hasTouch = true; 

     eventTypes = { 
      eventStart: "touchstart", 
      eventEnd: "touchend", 
      eventMove: "touchmove" 
     }; 
    } 

    // Tab drag starts 
    function startDrag(){ 

     panelOpen = !panelOpen; 

     $panel.bind(eventTypes.eventMove, changePanelPosition); 
    } 

    // Tab drag finishes 
    function dragEnd(){ 

      $panel.unbind(eventTypes.eventMove); 

      if(panelOpen){ 
       $panel.css("-webkit-transform", "translateX("+panelWidth+"px)"); 
      }else{ 
       $panel.css("-webkit-transform", "translateX(0px)"); 
      } 
    } 

    // Drag side panel 
    function changePanelPosition(event){ 

     // Prevent android from cancelling touchmove event 
     event.preventDefault(); 

     var parentOffset = $panel.position(), 
      pageX = (hasTouch) ? event.originalEvent.touches[0].pageX : event.originalEvent.pageX, 
      relX = pageX - parentOffset.left; 

     if(relX < 0){ 
      relX = 0; 
     }else if(relX > panelWidth){ 
      relX = panelWidth;  
     } 

     $panel.css("-webkit-transform", "translateX("+relX+"px)"); 

     lastPanelPos = relX; 
    } 

    // Events 
    $tab.on(eventTypes.eventStart, startDrag); 
    $document.on(eventTypes.eventEnd, dragEnd); 
}()); 



<div id="side-panel"> 
    <div class="btn"></div> 
</div>

鏈接js fiddle

來源

2014-05-15 Malcr001

好的工作，直到現在你想拖動的東西一直只顯示，如果側欄被拖過某個點或返回到初始位置，而不是點擊開放 –

我並不需要在所有的滑鼠移動計算$panel.position().left所以我乾脆搬到這個到函數的頂部。一個可能的工作，但現在似乎很好： LINK

來源

2014-05-30 16:09:54 Malcr001

我還想補充一點，CSS3轉換也會導致元素跳轉，但這隻能在android的web視圖中顯示。當我刪除CSS過渡時，一切都很好。 – Malcr001

使用touchmove/mousemove時左側位置不準確

回答

相關問題