Restricting jQuery-ui Draggable to drag up only, within a given area

问题

I've got a, fixed position, image that I'm animating with CSS and moving down the edge of the screen when the user scrolls. - Works great.

When the image gets to the bottom of the screen the user can click on it and it animates back to the top. - Also working well.

I'm also trying to allow the user to drag it to the top using jQuery-ui Draggable. - Here complications arise.

I need the image to only be dragged up, never down, so I've restricted my draggable element to drag up only, by moving its containment-wrapper with the draggable image. I'm also restricting drag completely at the top of the page to prevent the image from being dragged beyond the top of the page.

For the most part this works well in Firefox, but I'm having issues in Webkit browsers with the draggable image "jumping up" when the user first begins to drag it.

I'm also having issues getting this effect to work well on different screen sizes, as I'm using both top and bottom position adjustments.

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
        });
    }
});

Is there a better way to do this?

I've tried Drag functions, but they seem a little twitchy.

回答1:

I found a few issues with the above method, mostly having to do with using position:fixed; and using both top and bottom for repositioning.

I know its not perfect, but this is what I came up with...

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
        });
    }
});

来源：https://stackoverflow.com/questions/16619895/restricting-jquery-ui-draggable-to-drag-up-only-within-a-given-area