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 回答