Как остановить изменение размера для перетаскиваемого элемента 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

Что вам нужно сделать, это ограничить элемент на изменение размеров, а также Draggable в рабочей области, как так

$(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' в изменяемыми размерами Params