示例：http://jsfiddle.net/NSLmQ/3/
在用户完成调整大小或拖动之后,我正在使用dragStop和resizeStop的UI回调将像素位置值转换为百分比值.
function resizeStop(event,ui){
convert_to_percentage($(this));
}
function dragStop(event,ui){
convert_to_percentage($(this));
}
function convert_to_percentage(el){
var parent = el.parent();
el.css({
left:parseInt(el.css('left'))/parent.width()*100+"%",top: parseInt(el.css('top'))/parent.height()*100+"%",width: el.width()/parent.width()*100+"%",height: el.height()/parent.height()*100+"%"
});
}
如果父容器具有明确的高度和宽度,则此工作完全正常 – 在后续调整大小或拖动之前,jQuery UI将百分比转换回像素,并且在完成调整大小或拖动之后,我的回调将它们返回到百分比.所有的笨蛋.
当resizable元素的父元素设置为height：auto时(在链接的小提琴中,我使用子图像为包含父元素提供高度),在调整大小期间会出现问题
当我尝试调整UI元素的大小时,jQuery UI会不正确地将顶部和左侧的百分比转换为像素,并且元素将跳转到位.
此问题似乎是特定于Chrome的. Firefox偶尔会出现迷你跳跃,但它们似乎只是略微四舍五入的问题.在Chrome中,位置转移是戏剧性的.
虽然在父容器上设置显式高度可以解决UI问题,但它不允许响应式解决方案.
有任何想法吗？
===========================================
最新更新
@ peteykun的答案解决了我的根本问题,但有一个分支问题,我认为可能值得解决.
Chrome在计算“自动”大小时使用子像素,因此通过.jight()获取jQuery的高度会返回一个不精确的舍入答案(并在像素和百分比之间转换时导致视觉抖动,反之亦然).
因此,使用Vanilla JS .getBoundingClientRect().height而不是.height()会返回无抖动解决方案的子像素结果.
function setContainerSize(el) {
var parent = $(el.target).parent().parent();
parent.css('height',parent[0].getBoundingClientRect().height+'px');
}
再次感谢您的帮助,@ peteykun
解决方法
理想情况下,这应该可以使用.resizable {}的启动选项,但我自己尝试了,它没有帮助.相反,通过将.mouSEOver()绑定到句柄,似乎可以实现所需的效果：
$('.Box')
.resizable({containment: 'parent',handles: "se",create: setContainerResizer,stop:resizeStop})
function setContainerResizer(event,ui) {
console.log($(this)[0]);
$($(this)[0]).children('.ui-resizable-handle').mouSEOver(setContainerSize);
}
function setContainerSize(el) {
var parent = $(el.target).parent().parent();
parent.css('height',parent.height() + "px");
}
JSFiddle：http://jsfiddle.net/w2Jje/4/
更新：为了保持响应性,您可以在调整大小完成后再次使高度自动.请查看以下更新.
function convert_to_percentage(el){
var parent = el.parent();
el.css({
left:parseInt(el.css('left'))/parent.width()*100+"%",height: el.height()/parent.height()*100+"%"
});
parent.css('height','auto'); // Set it back to auto
}
JSFiddle：http://jsfiddle.net/w2Jje/5/
更新#2：为了解决在第二次调整大小之前鼠标永远不会离开句柄的情况,让我们在mouSEOut上重置高度：
function setContainerResizer(event,ui) {
console.log($(this)[0]);
$($(this)[0]).children('.ui-resizable-handle').mouSEOver(setContainerSize);
$($(this)[0]).children('.ui-resizable-handle').mouSEOut(resetContainerSize);
}
function resetContainerSize(el) {
parent.css('height','auto');
}
JSFiddle：http://jsfiddle.net/w2Jje/6/
