javascript - 使用 touchmove/mousemove 时，position().left 不准确

Question

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

如果您在 CSS 中将 #side-panel 上的过渡时间减少到 5 毫秒，则面板跳转会更加明显。

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

Answer 1

我不需要在每次鼠标移动时计算$panel.position().left，所以我只是将其移至函数的顶部。也许有一个解决方法，但现在似乎没问题: LINK