Question

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

<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 and width，因此更改不会继续。但是，containment根据left位置和width进行计算，以查看调整大小是否超出containment。

例如，当left为400px和width 100px以及container 500px时，它不会调整大小。通常，调整left的大小会更改left position和width，因此计算会允许调整大小，但激活grid后，每次调整大小事件都不会发生更改，因此{ {1}}阻止调整大小。它当然看起来像一个bug。

您可以修改containment的{{1}}功能，以便将此考虑在内。这样的东西似乎有用，但可能会有一些不必要的副作用：

resize

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

Answer 2

将position:relative添加到.container

JQuery-UI可调整大小的顶级＆amp;使用遏制时的正确错误

2 个答案: