JQuery-UI resizable top & right bug when using containment

Question

I've been working with jQuery-ui 1.11.4 and encountered a problem when working with a resizable div inside a container. When the resizable div is adjacent to the bottom or right of the containing div, then the resize doesn't work. Here's a jsfiddle demonstration:

http://jsfiddle.net/kcc6eq7c/

<div class="container">
<div class="box">
  <div class="ui-resizable-handle ui-resizable-n"></div>
  <div class="ui-resizable-handle ui-resizable-e"></div>
  <div class="ui-resizable-handle ui-resizable-s"></div>
  <div class="ui-resizable-handle ui-resizable-w"></div>

  <div class="ui-resizable-handle ui-resizable-ne"></div>
  <div class="ui-resizable-handle ui-resizable-se"></div>
  <div class="ui-resizable-handle ui-resizable-sw"></div>
  <div class="ui-resizable-handle ui-resizable-nw"></div>
</div>

</div>

<style>
.container{
  height:500px;
  width:500px;
  background-color:rgba(194,66,217,0.5);
}

.box {  
  top:400px;
  left:400px;
  width: 100px;
  height: 100px;
  background-color: rgba(66,194,217,0.9);
}

.ui-resizable-helper { border: 1px dotted #00F;
}

.ui-resizable-handle {
  background-color: rgba(0,0,0,.75);
  width: 8px;
  height: 8px;
}

.ui-resizable-se {
  bottom: -5px;
  right: -5px;
}
</style>

<script>
var set_position = function(width, height){
  $('.ui-resizable-n').css('left', (width/2-4)+'px');
  $('.ui-resizable-e').css('top', (height/2-4)+'px');
  $('.ui-resizable-s').css('left', (width/2-4)+'px');
  $('.ui-resizable-w').css('top', (height/2-4)+'px');
};

$( ".box" ).resizable({ 
  containment:$(".container"),
  handles: {
    'n':'.ui-resizable-n', 
    'e':'.ui-resizable-e',
    's':'.ui-resizable-s',
    'w':'.ui-resizable-w',
    'ne': '.ui-resizable-ne',
    'se': '.ui-resizable-se',
    'sw': '.ui-resizable-sw',
    'nw': '.ui-resizable-nw'
  },
  grid: [ 10, 10 ],
  create: function( event, ui ) {
    var width = $(event.target).width();
    var height = $(event.target).height();
    set_position(width, height);
  },
  resize: function(event, ui){
    var width = $(event.target).width();
    var height = $(event.target).height();
    set_position(width, height);
  } 
});

$( ".box" ).draggable({
  grid: [ 10, 10 ]
});
</script>

Anyone encountered this and knows how to fix it?

Thanks

Answer 1

The problem seems to be in the combination of grid and containment . When resizing right or bottom , only the width/height needs to be changed. But when resizing left and top , what actually happens is that the left/top position is changed as well as width/height .

Since you have grid option as well position and width change is not in continue. But, containment makes a calculation based on left position as well as width to see if the resizing gets out of the containment .

For example, when left is 400px and width 100px and container 500px , it won't resize. Normally, resizing left would change left position and width , so calculation would allow resizing, but with grid activated, the change is not happening on each resize event, hence the containment prevents resizing. It certainly looks like a bug.

You could modify resize function of containment to take this into account. Something like this seems to work, but there may be some unwanted side effects:

//Access the resize function of containment
$(".box").resizable('instance').plugins.resize[0][1] = function (event) {
  ...

    //This is the only change to the original function.
    //It looks at the direction of the resize.
    //If axis is left or top then the calculations are made with position
    //instead of width, with an adjusment based on grid size
    if ((/w/.test(that.axis) ? that.position.left - 10 : woset) + that.size.width >= that.parentData.width) {

        that.size.width = that.parentData.width - woset;
        if (pRatio) {
            that.size.height = that.size.width / that.aspectRatio;
            continueResize = false;
        }
    }

    if ((/n/.test(that.axis) ? that.position.top - 10 : hoset) + that.size.height >= that.parentData.height) {
        that.size.height = that.parentData.height - hoset;
        if (pRatio) {
            that.size.width = that.size.height * that.aspectRatio;
            continueResize = false;
        }
    }

  ...
}

http://jsfiddle.net/8r7xyzhn/3/

Answer 2

添加position:relative对于.container