Question

我有一个可以向上/向下拖动的元素。如果用户位于页面顶部，则元素（ div ）将在从顶部获得50px时停止拖动（如果用户一直滚动到底部，则相同于底部）。 / p>

问题：如果用户稍微向下滚动页面，则可以将 div 拖出视野。我希望它能在它从顶部和底部消失之前停止。图片手机屏幕，您可以向上/向下拖动屏幕右侧的一个小框，但即使向上/向下滚动页面也无法将其拖出视图。

我知道我需要弄清楚页面是否滚动然后从文档高度等等中减去...（或类似的东西）。或者也许有一个我不了解的更好的解决方案。

这是我到目前为止沿y轴使div 可拖动的原因：

    this.makeDraggable = function(){
        var docHeight = $(document).height();
        var winHeight = $(window).height();

        if(eventSupported('touchstart')){
            el.addEventListener("touchmove", handleMove, false);
        }

        function handleMove(e) {
            e.preventDefault();
            var y = e.changedTouches[0].pageY;
            var bottom = winHeight - y;

            if(bottom > 50 && y > 50)
            $el.offset({
                top: y
            });
        }
    }

Answer 1

找到解决方案：

 this.makeDraggable = function(){
        var docHeight = $(document).height();
        var winHeight = $(window).height();

        if(eventSupported('touchstart')){
            el.addEventListener("touchmove", handleMove, false);
        }

        function handleMove(e) {
            e.preventDefault();

            var winScroll = $(window).scrollTop(); // scrolled away from top
            var y = e.changedTouches[0].pageY;
            var top = winScroll + 50;
            var bottom = winScroll + winHeight - 50;

            if(bottom > y && y > top)
            $el.offset({
                top: y
            });
        }
    }

$（window）.scrollTop（）+ $（window）.height（）总是会成为＆＃34;窗口的底部＆＃34;。

阻止元素在移动设备上被拖出屏幕

1 个答案: