title: Draggable area is not correct after image is zoom using Jquery
body: <p>I am using jquery.viewport to create an viewport function: I use jquery ui to create slider and a own written zoom function to zoom the image. Also, using this plugin to create viewport function. </p>
  
  <p><a href="http://borbit.github.com/jquery.viewport/" rel="noreferrer">http://borbit.github.com/jquery.viewport/</a></p>
  
  <p>The problem is , after I zoom the image, the draggable area is only part of the content . That means I can not drag the content in some of its area. Is there anyway to fix the problem? Thanks</p>
  
  <p><strong>Html:</strong></p>
  
  <pre><code>&lt;div id="view"&gt;
      &lt;img src="demo/Web081112_P002_text.png" id = "largeText"/&gt;
      &lt;img src="demo/Web081112_P002_image.jpg" id = "largeImg"/&gt;
  &lt;/div&gt;
  &lt;div id='slider' style='display:block;position:fixed;z-index:105;height:25%;right: 2%;top:25%;'&gt;&lt;/div&gt;
  </code></pre>
  
  <p><strong>Javascript</strong></p>
  
  <pre><code>&lt;script&gt;
  
      $(document).ready(function(){
  
          $("#view").css("height",$(window).height());
          $("#view").css("width",$(window).width());
  
          /*
          $("#box").css("height",$("#largeImg").height());
          $("#box").css("width",$("#largeImg").width());
          */
  
          //initiate the viewport
          var element = $('#view').viewport();
          var content = element.viewport('content');
          content.draggable({containment: 'parent'});
          content.scraggable({containment: 'parent'});
  
                 $( "#slider" ).slider({
                  orientation: "vertical",
                  range: "min",
                  min: 100,
                  max: 200,
                  value: 100,
                  slide: function( event, ui ) {
  
                      $("#largeText").css("width",ui.value+"%");
                      $("
  
  #largeImg").css("width",ui.value+"%");
  
  
                      $("#largeText").css("height",ui.value+"%");
                      $("#largeImg").css("height",ui.value+"%");
  
  
                      $("#largeText").css('top', ($("#view").height()/2-$("#largeText").height()/2) +'px');
                      $("#largeImg").css('top', ($("#view").height()/2-$("#largeImg").height()/2) +'px');
  
                      $('#largeText').css('left', ($("#view").width()/2 - $('#largeText').width()/2)+'px');
                      $('#largeImg').css('left', ($("#view").width()/2 - $('#largeImg').width()/2)+'px');
  
                      //element.viewport('update');
                      //Using this statement to update will occur error.
  
                   }
              });   
  
  
      });
      &lt;/script&gt;
  </code></pre>
  
  <p><strong>css:</strong></p>
  
  <pre><code>&lt;style&gt;
      #view {
          height:600px;
          width:350px;
      }
  
      #largeImg {     
              position:absolute;
              display:block;
              width: 1250px;
              height: 1500px;
              z-index: 100;
      }
  
      #largeText {
              position:absolute;
              display:block;
              width: 1250px;
              height: 1500px;
              z-index: 101;
      }
  
      body {
          width : auto;
          height: auto;
          overflow:hidden;
      }
  &lt;/style&gt;
  </code></pre>