title: Jquery droppable area wrong if zoomed
body: <p>Here is the fiddle with comment:
  <a href="http://jsfiddle.net/7xw1m1qd/1/" rel="nofollow">http://jsfiddle.net/7xw1m1qd/1/</a></p>
  
  <p>Html for example:</p>
  
  <pre><code>&lt;div class="droppable"&gt;&lt;/div&gt;
  &lt;div class="drag"&gt;&lt;/div&gt;
  </code></pre>
  
  <p>JS for example:</p>
  
  <pre><code>$('.drag').draggable({});
  
  $('.droppable').droppable({
      out: function() {
        $('.drag').css('background-color', 'red');
      },
  
      drop: function() {
        $('.drag').css('background-color', 'green');
      },
  });
  </code></pre>
  
  <p>CSS for example:</p>
  
  <pre><code>.droppable {
      width: 200px;
      height: 200px;
      transform: scale(2);    
      -webkit-transform: scale(2);    
      -ms-transform: scale(2); 
      background-color: #C3C3C3;
  }
  
  .drag {
      background-color: black;
      width: 20px;
      height: 20px;
      z-index: 10;
      position: absolute;
      top: 10px;
      left: 350px;    
  }
  </code></pre>
  
  <p>The problem is: 
  If droppable is zoomed (by transform: scale), it still uses original dimensions for droppable, so i can drop element only in original bounds of droppable.</p>
  
  <p>I found some similiar questions, but not found working solution.</p>