jQuery的限制的UI可拖动只拖了起来，给定区域内 [英] Restricting jQuery-ui Draggable to drag up only, within a given area

问题描述

我已经有了一个固定的位置，形象我与CSS动画和向下移动，当用户滚动屏幕的边缘。 - 伟大的作品

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.

我也想以允许用户将其拖动到使用的jQuery的UI可拖动的顶部。 - 在这里出现并发症

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

我需要的图像只能拖了起来，永不倒，所以我限制我的拖动元素只能拖起来，通过与拖动图像移动的遏制，包装。我还完全从被拖动超出页面的顶部限制拖动在页面的顶部，以prevent图像。

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.

在大多数情况下这种效果很好在Firefox，但我有与拖动图像的WebKit浏览器问题跳起来用户至上开始时拖动它。

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.

推荐答案

我觉得上面的方法的一些问题，主要是其使用做的位置是：固定; 并利用顶部和底部的重新定位。

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

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

这篇关于jQuery的限制的UI可拖动只拖了起来，给定区域内的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！