0

我有一个可以向上/向下拖动的元素。如果用户位于页面顶部,则元素(div)将在距离顶部 50px 时停止拖动(如果用户一直滚动到底部,则底部相同)。

问题:如果用户将页面向下滚动一点,那么div可能会被拖出视图。我希望它在从顶部和底部消失之前停止。图片手机屏幕,您可以向上/向下拖动屏幕右侧的一个小框,但不能将其拖出视图,即使您向上/向下滚动页面也是如此。

我知道我需要确定页面是否滚动,然后从文档高度等中减去它,等等......(或类似的东西)。或者也许有一个我不知道的更好的解决方案。

到目前为止,这是使 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
            });
        }
    }
4

1 回答 1

0

找到了解决方案:

 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() 始终是“窗口”的底部。

于 2016-07-27T19:41:58.507 回答