jquery UI 可拖动可调整大小与包含在 ie9 中不起作用？答案

【问题标题】：jquery UI draggable resizable with containment does not work in ie9?jquery UI 可拖动可调整大小与包含在 ie9 中不起作用？
【发布时间】：2012-05-22 23:43:05
【问题描述】：

代码在 Chrome 上运行，我正在尝试让代码在 ie9 上运行。它可以在没有包含的情况下与 draggable() 一起正常工作，但是当包含设置为父级时会严重破坏行为：

img = $("<img alt='Preview' id='preimg' src='" + data.result.url +"' />")
$('#preimage').append(img);
$('#preimage').resizable({
                    'aspectRatio':true,
                    'handles':"all",
                    'autoHide':true,
                     containment: "parent"
                }).draggable({
                            containment: "parent"
                        });

父位置设置为相对。我正在使用 jquery 1.7.2 和 jquery-ui 1.8.20 有什么解决办法吗？

编辑

经过大量测试 - 我发现 div 的容器大小计算工作不正常，我能够让它在启用可调整大小的情况下工作，但实际上没有调整 div 的大小。一旦我调整可拖动包含区域的大小，它的大小就会减小，多次调整大小会导致该区域变小，直到拖动选项停止工作。

【问题讨论】：

你能提供一个 jsFiddle (jsfiddle.net) 来展示这个吗？
显然有些选项在 jquery ui 1.8.18 版本中不可用，由于某种原因，我无法调整大小以在 jsfiddle 上工作，所以我无法在那里复制效果。

标签： jquery-ui internet-explorer jquery-ui-draggable jquery-ui-resizable

【解决方案1】：

我发现 jquery ui 库有几个关于这些问题的错误报告 - http://bugs.jqueryui.com/report/10?P=resizable

我能够找到一个我广泛测试过的解决方法，并且在大多数情况下应该可以工作。这里的关键是您需要使用不浮动且具有相对位置的容器 div。如果您需要使用浮动/绝对 div，只需在其中创建一个 div 并将位置设置为相对。对于问题中的代码，html 如下所示：

<div class="outer"> 
    <div class="container">
         <div id="preimage"></div>
    </div>
</div>

css 是：

.outer{
position:absolute;
right:0;
}
.container{
position: relative; 
}

由于在调整大小时不能拖动元素，反之亦然，因此使用 javascript 的更安全的方法（避免一些问题）是：

$('#sqoutline2').resizable({
        'handles':"all",
        'autoHide':false,
        containment: "parent",
        start:function(){$('#sqoutline2').draggable('options','disabled','true');},
        stop:function(){$('#sqoutline2').draggable('options','disabled','false');}
    }).draggable({containment:"parent",
            start:function(){$('#sqoutline2').resizable('options','disabled','true');},
           stop:function(){$('#sqoutline2').resizable('options','disabled','false');}
       });

【讨论】：