如何停止可拖動元素Jquery Ui的調整大小？

Question

我有一個工作區域，在那裏我可以拖動&並調整我的元素大小。

$(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, 

}); 

但是，如果我開始調整其大小，大小不能由工作區的邊界固定。

Answer 1

你需要做的是限制元素的調整大小以及可拖動到工作區域，像這樣

$(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'