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

Question

我有一个可以拖动的元素up/down。如果用户在页面顶部，元素 (div) 将在距顶部 50px 时停止拖动（如果用户一直滚动到底部，则底部相同）到底部的方式）。

问题： 如果用户向下滚动页面一点点，那么 div 可以被拖出看法。我希望它在从顶部和底部消失之前停止。图片单元格 phone 屏幕，您可以在屏幕右侧拖动一个小框 up/down，但不能将其拖出视图，即使您滚动 up/down 页面。

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

到目前为止，这是使 div 可沿 y 轴拖动 的内容：

    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() 始终是 "window".

的底部

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

Stop element from being dragged off screen on mobile device

javascript

jquery

touch

touchmove