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 に答える