jquery ui draggable - 如何防止拖动到文档顶部？

Question

我已经设置了一个jquery draggable,它可以在整个文档中移动,它不包含在任何东西中,这是可以接受的,因为当用户拖动时,我希望它们能够向下拖动到页面下方(或者左或右)他们希望如此.

实际上,我想要的唯一限制是,应该阻止它们将元素拖到页面顶部之外.

是否可以防止仅在容器的一个边缘外拖动？

Answer 1

您可以覆盖被拖动元素的位置.

这个小提琴是位置覆盖的一个例子:http://jsbin.com/ufarif/7/edit

这是一个不允许比左边界的80 px更接近的例子

$('[id^="drag-"]').each(function() {
    $(this).draggable({
        opacity: 0.7,
        cursorAt: { top: 15, left: 50 },        
        scroll: true,
        stop: function(){},  
        drag : function(e,ui){            
            //Do not permit to be more close than 80 px of the left border
            console.log(ui.position.left);      
            if(ui.position.left < 80)    
                ui.position.left = 80;
        });
});

Answer 2

您可以使用包含选项来防止拖动到窗口外：

$("#id").draggable({
    handle: tr_top,
    containment: "window"
});