Jquery ui jquery ui可拖动-如何防止拖动到文档顶部之外?

Jquery ui jquery ui可拖动-如何防止拖动到文档顶部之外?,jquery-ui,draggable,Jquery Ui,Draggable,我已经设置了一个jquerydraggable,它可以在整个文档中移动,不包含任何内容,这是可以接受的,因为当用户拖动时,我希望他们能够按照自己的意愿将页面拖到底(或向左或向右) 事实上,我想要的唯一限制是,应该防止它们将元素拖到页面顶部之外 是否可以防止仅在容器的一个边缘外拖动?您可以覆盖正在拖动的元素的位置 此小提琴是位置覆盖的一个示例: 这是一个不允许超过左边界80像素的示例 $('[id^="drag-"]').each(function() { $(this).draggabl

我已经设置了一个jquerydraggable,它可以在整个文档中移动,不包含任何内容,这是可以接受的,因为当用户拖动时,我希望他们能够按照自己的意愿将页面拖到底(或向左或向右)

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


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

您可以覆盖正在拖动的元素的位置

此小提琴是位置覆盖的一个示例:

这是一个不允许超过左边界80像素的示例

$('[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;
        });
});
$('[id^=“drag-”])。每个(函数(){
$(此)。可拖动({
不透明度:0.7,
光标:{顶部:15,左侧:50},
卷轴:没错,
停止:函数(){},
拖动:函数(e,ui){
//不允许距离左边界超过80像素
控制台日志(ui.position.left);
如果(ui.position.left<80)
ui.position.left=80;
});
});
您可以使用该选项防止在窗口外拖动:

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