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

Question

我已经设置了一个jquery可拖动的，它可以在整个文档中移动，它不包含在任何内容中，这是可以接受的，因为当用户拖动时，我希望他们能够拖动尽可能远的距离页面(或左或右)如他们所愿。

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

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

Answer 1

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

这个 fiddle 是位置覆盖的示例: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;
        });
});