<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery UI Resizable - Default functionality</title>
<link rel="stylesheet" href="jquery-ui.css">
<script src="jquery-1.10.2.js"></script>
<script src="jquery-ui.js"></script>
<link rel="stylesheet" href="style.css">
<style>
#resizable { width:100px; height: 100px; text-align: center; position: absolute; left:0; top:0;}
#resizable h3 { text-align: center; margin: 0; }
#myimg{max-width: 100%; min-height:100%; }
#containerb{ width: 1000px; height: 600px; background: #999; position: absolute; left:0; top:0;}
#container{ position: absolute; left:0; top:0; width: 100px; height: 100px;}
</style>
<script>
$(function() {
$( "#resizable" ).resizable({
handles:'n, e, s, w, ne, se, sw, nw',
autoHide: true,
aspectRatio:false,
containment:'#containerb',
resize:function(){
$('#container').css({
'width':$('#resizable').width() + 'px',
'height':$('#resizable').height() + 'px'
});
}
});
$( "#container" ).draggable({
containment: "parent"
});
var nowhandle = $('#resizable');
nowhandle.on('mousedown','.ui-resizable-n,.ui-resizable-e,.ui-resizable-s,.ui-resizable-w',function(event){
nowhandle.resizable( "option", "aspectRatio", false ).data('uiResizable')._aspectRatio = false;
console.log(' set aspectratio false!')
});
nowhandle.on('mousedown','.ui-resizable-sw,.ui-resizable-se,.ui-resizable-ne,.ui-resizable-nw',function(){
console.log(' set aspectratio true!')
nowhandle.resizable( "option", "aspectRatio", true ).data('uiResizable')._aspectRatio = true;
});
nowhandle.on('mouseup','.ui-resizable-handle',function(){
nowhandle.resizable( "option", "aspectRatio", false ).data('uiResizable')._aspectRatio = false;
});
});
</script>
</head>
<body>
<div id="containerb">
<div id="container">
<div id="resizable" class="ui-widget-content">
<img src="0f1077ba53.png" alt="" id="myimg">
</div>
</div>
</div>
</body>
</html>
这种情况下,上边和左边都无法进行resize操作了?why?
引入的文件下载链接:http://pan.baidu.com/s/18SwvO