如何停止可拖动元素Jquery Ui的调整大小?
问题描述:
我有一个工作区域,在那里我可以拖动&并调整我的元素大小。如何停止可拖动元素Jquery Ui的调整大小?
$(objName).draggable({
start: function (ev, ui) {$(this).css({opacity:0.3})},
cursor:'move',
containment: 'parent',
snap:true,
stop: function (ev, ui) {
$(this).css({opacity:1});
var pos = $(ui.helper).offset();
console.log($(this).attr("id"));
console.log(pos.left)
console.log(pos.top)
}
})
.resizable({ghost:true,
});
但是,如果我开始调整其大小,大小不能由工作区的边界固定。
答
你需要做的是限制元素的调整大小以及可拖动到工作区域,像这样
$(objName).draggable({
start: function (ev, ui) {$(this).css({opacity:0.3})},
cursor:'move',
snap:true,
drag: function(e, ui){
var topRightCornerPos_x = $(this).css('left') + $(this).width();
var bottomLeftConerPos_y = $(this).css('top') + $(this).width();
if(topRightCornerPos_x > $(this).parent().width()){
var maxLeft = $(this).parent().width() - $(this).width();
$(this).css('left', maxLeft);
}
if(bottomLeftConerPos_y > $(this).parent().height()){
var maxTop = $(this).parent().height() - $9this).height();
$(this).css('top', maxTop);
}
},
stop: function (ev, ui) {
$(this).css({opacity:1});
var pos = $(ui.helper).offset();
console.log($(this).attr("id"));
console.log(pos.left)
console.log(pos.top)
}
})
.resizable({ghost:true,
containment: $('#workingarea_id')
});
或再次,你可以在可调整大小的PARAMS使用containment: 'parent'
我已经尝试它,但它不起作用(((( – Tirmit 2012-01-17 13:27:40
是你的遏制元素是固定的大小或至少有一个最大尺寸,如果不是这可能是你的问题,如果不是你必须正确的你自己的支票我会更新到用你自己的支票很快显示我的意思好吧回来第一部分的答案第一部好吗? – 2012-01-17 14:56:04
是的,它的尺寸是 – Tirmit 2012-01-23 09:32:22