2

该代码适用于 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 的大小。一旦我调整可拖动包含区域的大小，它的大小就会减小，多次调整大小会导致该区域变小，直到拖动选项停止工作。

4

1 回答 1

2

我发现 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');}
       });
于 2012-08-15T21:23:32.300 回答