首页 > jquery ui resizable 左侧和上册无法拖动

jquery ui resizable 左侧和上册无法拖动

<!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

【热门文章】
【热门文章】