我已经设置了一个jquery draggable,它可以在整个文档中移动,它不包含任何东西,这是可以接受的,因为当用户拖动时,我希望他们能够根据需要向下(或向左或向右)拖动页面。
事实上,我想要的唯一限制 - 是应该防止它们将元素拖到页面顶部之外。
是否可以防止仅拖到容器的一个边缘之外?
您可以覆盖正在拖动的元素的位置。
这个小提琴是位置覆盖的一个例子: 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;
});
});
您可以使用包含选项来防止拖到窗口外:
$("#id").draggable({
handle: tr_top,
containment: "window"
});