Firefox (私のバージョン: 3.6.12) で次のことを試してください。
これは機能していましたが、現在は機能していません。ITはIEで動作し、FFを使用してjsFiddleで動作します-アドオンが影響している可能性があると思います。
コード：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>Test</title>
<link media="all" type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.6/themes/base/jquery-ui.css" rel="stylesheet" />
<style type="text/css" media="all">
.ui-resizable-e {right:0; background:#eee; z-index:1000;}
.ui-resizable-w {left :0; background:#eee; z-index:1000;}
#foo
{
background : #fff;
border : 1px solid #ccc;
margin : 0 auto;
padding : 1em;
text-align : left;
width : 75%;
}
</style>
<script src="http://code.jquery.com/jquery-1.4.4.min.js" type="text/javascript"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.5/jquery-ui.js" type="text/javascript"></script>
<script type="text/javascript">
$(function(){
var foo = $('#foo');
foo.resizable({
animate : true
, animateEasing : 'swing'
, handles : 'e,w'
, resize : function (event,ui){
ui.position.left = ui.originalPosition.left;
ui.size.width = ( ui.size.width
- ui.originalSize.width )*2
+ ui.originalSize.width;
}
});
});
</script>
</head>
<body>
<div id="foo"></div>
</body>
</html>
エラーを再現するには:
- 端の 1 つをつかみ、div のサイズを変更します (ドラッグして離します)。
通常、これが完了すると、サイズ変更フックが解放されるはずですが、私にとってはそうではありません。 - グリップのクリックを解除した後、本体の任意の場所 (グリップの左右) をクリックして、div のサイズを変更できます。
上記のテスト ページの完全な HTML (長くはない) を含めました。すべての CSS とスクリプトは、Google のライブラリにリンクされています。