title: Cannot drag over all body in jquery ui
body: <p>My problem has been started when i want to drag a big size elements, i cannot drag those items over all body, i am using bootstrap 3.3.7 and JQueryUI 
  here's an example of my problem:
  <a href="https://i.stack.imgur.com/iwNnv.gif" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/iwNnv.gif" alt="enter image description here"></a></p>
  
  <p>this is only happens for the big size elements,</p>
  
  <blockquote>
    <p>here's an example of code:</p>
  </blockquote>
  
  <pre><code>$('body .removable').draggable({
          cursor: 'move',
          helper: 'clone',
          appendTo: 'body',
          containment: 'window',
          //revert: true,
          //stack: "#fields-drop-area",
          zIndex: 101,
          drag: function (event, ui) {
              $("#trash").removeClass("hidden");
              $(ui.helper).css({ 'width': "12%", "height": "40px",'overflow':'hidden' });
          },
          stop: function (event, ui) {
              $("#trash").addClass("hidden");
              $(ui.helper).css('width', "18%");
          }
      });
  </code></pre>
  
  <blockquote>
    <p>the trash droppable code:</p>
  </blockquote>
  
  <pre><code>    $('body #trash').droppable({
      accept: '.removable,.btn-removable',
      hoverClass: 'over-area',
      forceHelperSize: true,
      drop: function (event, ui) {
          debugger;
          document.getElementById('recycle').play();
          var id;
          if (ui.helper.hasClass("dropped-tab")) {
              id = ui.helper.data("id");
              if (ui.helper.hasClass("tab-parent")) {
                  $(ui.helper).hide('explode', null, 500, function () { $(ui.draggable.closest('.panel')).remove(); });
                  updateTabForm(null, objState.Deleted, id);
              } else if (ui.helper.hasClass("tab-sub")) {
                  updateTabForm(id, objState.Deleted, null);
                  $(ui.helper).hide('explode', null, 500, function () { ui.draggable.remove(); });
              }
          } else if (ui.helper.hasClass("dropped-field")) {
              id = ui.helper.find('div.panel-heading&gt;label').data('fieldid');
              updateFieldForm(id, objState.Deleted, ui);
              $(ui.helper).hide('explode', null, 500, function () { ui.draggable.remove(); });
          }
          if (ui.draggable.hasClass('btn-success')) {
              $('#fields-drop-area').html('');
          }
      }
  });
  </code></pre>
  
  <blockquote>
    <p>here's the css:</p>
  </blockquote>
  
  <pre><code>.full-height-page, .full-height-page body {
      height: 100%;
      min-height: 100%;
      /* this is necessary */
  }
  
  body {
      padding-top: 50px;
      padding-bottom: 20px;
  }
  
      @media (min-width: 768px) {
          .grid-divider {
              position: relative;
              padding: 0;
          }
  
              .grid-divider &gt; [class*='col-'] {
                  position: static;
              }
  
                  .grid-divider &gt; [class*='col-']:nth-child(n+2):before {
                      content: "";
                      border-left: 1px solid #DDD;
                      position: absolute;
                      top: 0;
                      bottom: 0;
                  }
  
          .col-padding {
              padding: 0 15px;
  
      .ui-state-highlight {
          height: 1.5em;
          line-height: 1.2em;
      }
  
      .body-content #trash {
          width: 20%;
          height: 30%;
          background-color: #f9f9f9;
          content: "sssss";
          position: absolute;
          z-index: 100;
          bottom: 0;
          right: 2%;
          text-align: center;
          border-radius: 8px;
          border: 3px solid #bbf3bf;
      }
  </code></pre>
  
  <blockquote>
    <p>here's my Html code:</p>
  </blockquote>
  
  <pre><code>&lt;div class="row grid-divider"&gt;
      &lt;div id="trash" class="hidden"&gt;
          &lt;h2&gt;Through Items Here&lt;/h2&gt;
          &lt;i class="fa fa-5x fa-trash-o  faa-bounce animated"&gt;&lt;/i&gt;
      &lt;/div&gt;
      &lt;div class="col-md-4" id="tools-container"&gt;
          &lt;h4 class="container-title text-center"&gt;
              &lt;strong&gt;Toolbox&lt;/strong&gt;
          &lt;/h4&gt;
          &lt;hr/&gt;
          &lt;div id="tools-container-body" class="height-600"&gt;&lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="col-md-4" id="tabs-container"&gt;
          &lt;h4 class="container-title text-center"&gt;
              &lt;strong&gt;Tabs&lt;/strong&gt;
          &lt;/h4&gt;
          &lt;hr/&gt;
          &lt;div class="height-600" id="tabs-drop-area"&gt;&lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="col-md-4" id="fields-container"&gt;
          &lt;h4 class="container-title text-center"&gt;
              &lt;strong&gt;Fields&lt;/strong&gt;
          &lt;/h4&gt;
          &lt;hr/&gt;
          &lt;div class="height-600" id="fields-drop-area"&gt;&lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>after i remove the containment it works, but i cannot drop into trash</p>