使用touchmove / mousemove时position（）位置不正确。

Question

我一直在开发侧边栏，它应允许用户拖动绿色选项卡以展开和折叠侧边栏。 我相信它大部分都在那儿，但是在拖动侧栏时，由于我认为不准确的position（）。left值，用户会遇到一些阻力。

如果您在CSS中将＃side-panel上的过渡时间减少到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小提琴

Answer 1

我不需要在每次鼠标移动时都计算$panel.position().left ，因此只需将其移动到函数顶部即可。 也许可以解决，但是现在看起来还不错： LINK