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

Posted 2023-05-08

【中文标题】jquery ui draggable - 如何防止拖动到文档顶部之外？

【英文标题】：jquery ui draggable - how can I prevent dragging outside the top of my document?

【发布时间】：2012-11-13 23:28:09

【问题描述】：

我已经设置了一个 jquery draggable，它可以在整个文档中移动，它不包含任何东西，这是可以接受的，因为当用户拖动时，我希望他们能够拖动到最下方页面（或左或右）随心所欲。

确实，我想要的唯一限制是应该防止他们将元素拖到页面顶部之外。

是否可以防止只拖到容器的一个边缘之外？

【参考方案1】：

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

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

这是一个示例，不允许靠近左边框超过 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;
        );
);

【参考方案2】：

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

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