javascript - JQuery-UI 使用包含时可调整大小的顶部和右侧错误

Question

我一直在使用 jQuery-ui 1.11.4，在容器内使用可调整大小的 div 时遇到了问题。 当可调整大小的 div 与包含的 div 的底部或右侧相邻时，调整大小不起作用。 这是一个 jsfiddle 演示:

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>

有人遇到过这个问题并且知道如何解决吗？

谢谢

Answer 1

问题似乎出在 grid 和 containment 的组合上。当调整 right 或 bottom 大小时，只需更改 width/height 即可。但是当调整 left 和 top 大小时，实际发生的是 left/top 位置以及 width/height。

由于您还有 grid 选项以及 position 和 width 更改不会继续。但是，containment 根据 left 位置和 width 进行计算，以查看调整大小是否超出了 containment。

例如，当left为400px和width 100px和container 500px，它不会调整大小。通常，调整 left 的大小会改变 left position 和 width，因此计算将允许调整大小，但是激活了 grid，每次调整大小事件都不会发生更改，因此 containment 会阻止调整大小。它看起来确实像一个错误。

您可以修改 containment 的 resize 函数来考虑到这一点。这样的事情似乎可行，但可能会有一些不需要的副作用:

//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/