使用包含时JQuery-UI可调整大小的上、右错误
使用包含时JQuery-UI可调整大小的上、右错误
提问于 2015-08-23 13:59:53
我一直在使用jQuery 1.11.4，在容器中使用可调整大小的div时遇到了问题。当可调整大小的div相邻于包含div的底部或右侧时，则调整大小无效。这里有一个小提琴手演示：
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>有人遇到这种情况，知道怎么解决吗？
谢谢
回答 2
Stack Overflow用户
回答已采纳
发布于 2015-08-23 20:44:44
问题似乎在于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时，不会在每个调整大小的事件上发生更改，因此containment会阻止调整大小。它看上去确实像个虫子。
您可以修改resize函数的containment来考虑这一点。像这样的事情似乎很有效，但也可能有一些不必要的副作用：
//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/
Stack Overflow用户
发布于 2015-08-23 14:23:48
将position:relative添加到.container
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/32167437
复制相关文章
相似问题
腾讯云开发者
