我有一个可以向上/向下拖动的元素。如果用户位于页面顶部,则元素(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
});
}
}