限制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，但他們似乎有點t。。

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