[英]How to stop the resize for a draggable element 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,
});
但是,如果我開始調整大小,則無法通過工作區域的邊界確定大小。
您需要做的就是將Element以及可拖動對象限制在調整大小上,就像這樣
$(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')
});
或者再次可以在可調整大小的參數中使用containment: 'parent'
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.