Question

该代码适用于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的容器大小计算不能正常工作，我能够使用resizable启用但没有实际调整div的大小。一旦我调整可拖动的收容区域的大小减小，多次调整大小会导致此区域变小，直到拖动选项停止工作。

Answer 1

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

我能够找到一个广泛测试的工作，并且在大多数情况下应该可以工作。这里的关键是你需要使用一个没有浮动并且位置相对的容器div。如果你需要使用浮动/绝对div，只需在其中创建一个div并将位置设置为relative。对于问题中的代码，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');}
       });

jquery UI draggable resizable with containment在ie9中不起作用？

1 个答案: