限制jQuery-ui Draggable只能在给定区域内向上拖动

Question

我有一个固定位置的图像，我使用 CSS 制作动画，并在用户滚动时沿屏幕边缘向下移动。 - 效果很好。

当图像到达屏幕底部时，用户可以单击它，它会以动画方式返回到顶部。 - 也很好用。

我还试图允许用户使用jQuery-ui Draggable 将其拖到顶部。 - 这里出现了并发症。

我只需要向上拖动图像，而不是向下拖动，因此我通过将其包含包装器与可拖动图像一起移动来限制我的可拖动元素只能向上拖动。我还在页面顶部完全限制拖动，以防止图像被拖动到​​页面顶部之外。

在大多数情况下，这在 Firefox 中运行良好，但我在 Webkit 浏览器中遇到问题，当用户第一次开始拖动时，可拖动图像“跳起来”。

由于我同时使用顶部和底部位置调整，因此我也无法让这种效果在不同的屏幕尺寸上正常工作。

jsFiddle

// repel down animation 
var previousScroll = 0;
var scroll = function () {
    var currentScroll = $(this).scrollTop();
    var z = $(window).scrollTop();
    if (currentScroll > previousScroll && $('#repel').css('top') > '-400px') {
        //down scroll code
        $("#repel").removeClass("climb");
        $("#repel").addClass("repel").delay(400).css('top', '+=2%');
    }
    if (currentScroll > previousScroll && $('#repel').css('top') < '-400px') {
        //down scroll code
        $("#repel").removeClass("climb");
        $("#repel").addClass("repel").delay(400).css('top', '+=0%');
    }
    if (z < 10) {
        $("#containment-wrapper").css({
            height: "349%"
        });
    }
    if (z > 10) {
        $("#containment-wrapper").css({
            height: "360%"
        });
    } else {
        // no- upscroll animation/code  
    }
    previousScroll = currentScroll;
    // fade in word bubble
    if (z > 1250) {
        $('.go').fadeIn('slow');
    } else {
        $('.go').fadeOut('slow');
    }
};

$(document).ready(scroll);
$(window).scroll(scroll);

//remove animation when finished     
$("#repel").on('animationend webkitAnimationEnd oanimationend MSAnimationEnd', function () {
    $('#repel').removeClass('repel');
});
//bounce back to top of page when clicked      
$('.go').click(function () {
    $('html, body').animate({
        scrollTop: 0
    }, 'slow');
    $("#repel").removeClass("repel");
    $("#repel").css('top', '-100%').addClass("climb").delay(2100).queue(function (next) {
        $(this).removeClass("climb");
        next();
    });

});


// drag Up, but not down
$('#repel').draggable({
    axis: "y",
    containment: "#containment-wrapper",
    scroll: true,
    scrollSensitivity: 100,
    scrollSpeed: 25,
    cursor: '-moz-grabbing',
    addClasses: false
});

$('#repel').mousemove(function () {
    var x = $('#repel').css('bottom');
    var z = $(window).scrollTop();
    $("#containment-wrapper").css({
        bottom: x
    });
    if (z < 10) {
        $("#containment-wrapper").css({
            bottom: "-150%",
            height: "349%"
        });
    } else {
        $("#containment-wrapper").css({
            bottom: x
        });
    }
});

有没有更好的方法来做到这一点？

我试过Drag functions，但它们似乎有点抽搐。

Answer 1

我发现上述方法存在一些问题，主要与使用position:fixed; 以及同时使用顶部和底部进行重新定位有关。

我知道它并不完美，但这就是我想出的......

jsFiddle

// repel down animation 
var previousScroll = 0;
var scroll = function () {
    var currentScroll = $(this).scrollTop();
    var z = $(window).scrollTop();
    var wh = $(window).height();
    var onScreen =  wh - 1100 + 'px';
    if (currentScroll > previousScroll && $('#repel').css('top') > onScreen) {
        //down scroll code
        $("#repel").removeClass("climb");
        $("#repel").addClass("repel").delay(400).css('top', '+=3px');
    }
    if (currentScroll > previousScroll && $('#repel').css('top') <= onScreen) {
        //down scroll code
        $("#repel").addClass("repel");
    }
    if (z < 10) {
        $("#containment-wrapper").css({
            height: "1800px"
        });
    }
    if (z > 10) {
        $("#containment-wrapper").css({
            height: "2000px"
        });
    } else {
        // no- upscroll animation/code  
    }
    previousScroll = currentScroll;
    // fade in word bubble
    if (z > 1350) {
        $('.go').fadeIn('slow');

    } else {
        $('.go').fadeOut('slow');
    }
};

$(document).ready(scroll);
$(window).scroll(scroll);

//remove animation when finished     
$("#repel").on('animationend webkitAnimationEnd oanimationend MSAnimationEnd', function () {
    $('#repel').removeClass('repel');
});
//bounce back to top of page when clicked      
$('.go').click(function () {
    $('html, body').animate({
        scrollTop: 0
    }, 'slow');
    $("#repel").removeClass("repel");
    $("#repel").css('top', '-850px').addClass("climb").delay(2100).queue(function (next) {
        $(this).removeClass("climb");
        next();
    });

});


// drag Up, but not down
$('#repel').draggable({
    axis: "y",
    containment: "#containment-wrapper",
    scroll: true,
    scrollSensitivity: 25,
    scrollSpeed: 25,
    addClasses: false
});
$('#repel').mousemove(function () {
    var z = $(window).scrollTop();
    var o = $('#repel').offset().top;
    var h = $('#repel').height();
        $("#containment-wrapper").css({
            top:  o + h -2000
        });
    if (z < 10) {
        $("#containment-wrapper").css({
            top: -850
        });
    } else {
        $("#containment-wrapper").css({
            top:  o + h -2000
        });
    }
});