title: Bootstrap 3 column class interfering with jquery-ui droppable div
body: <p>I'm using jQuery-UI v1.11.2 in order to create some draggable and droppable divs, and Boostrap 3.1.1 as well.</p>
  
  <p>I'd like to know why a Boostrap column class is interfering with the draggable "hint". </p>
  
  <p>In other words, as I drag an image from my Gallery div to my Dashboard div, the Dashboard div comes in FRONT of the image hint. Then once I DROP my image on the Dashboard div, the image re-appears.</p>
  
  <p>If I remove the col-md-8 class from the Dashboard div, this problem goes away. </p>
  
  <p>Here are two screen shots to demonstrate:</p>
  
  <p>1) WITHOUT the Bootstrap column class on the right div (image hint looks good)</p>
  
  <p>2) With the Bootstrap column class on the right div (image hint disappears)</p>
  
  <p><img src="https://i.stack.imgur.com/Kmm7a.png" alt="Good draggable hint without the Bootstrap column class "></p>
  
  <p><img src="https://i.stack.imgur.com/Isxel.png" alt="Bad draggable hint with the Bootstrap column class "></p>
  
  <p>Here's the HTML code :</p>
  
  <pre><code>&lt;section id="gadgets-view" class="mainbar" data-ng-controller="gadgets"&gt;
  </code></pre>
  
  <p></p>
  
  <pre><code>&lt;div class="container-fluid"&gt;                       
      &lt;div class="row-fluid"&gt;
          &lt;!-- based on http://jqueryui.com/droppable/#photo-manager --&gt;
          &lt;div class="ui-widget ui-helper-clearfix  col-md-4"&gt;    &lt;-- GALLERY OF WIDGETS --&gt;
              &lt;ul id="gallery" class="gallery ui-helper-reset ui-helper-clearfix"&gt;
                  &lt;li class="ui-widget-content ui-corner-tr"&gt;
                      &lt;h5 class="ui-widget-header"&gt;Tree Grid&lt;/h5&gt;                    
                      &lt;img src="images/treegrid.jpg" alt="Hierarchy Grid" width="96" height="72"&gt;
                  &lt;/li&gt;
                  &lt;li class="ui-widget-content ui-corner-tr"&gt;
                      &lt;h5 class="ui-widget-header"&gt;Area Chart&lt;/h5&gt;
                      &lt;img src="images/chart_area.jpg" alt="Area Chart" width="96" height="72"&gt;
  
                  &lt;/li&gt;
                  &lt;li class="ui-widget-content ui-corner-tr"&gt;
                      &lt;h5 class="ui-widget-header"&gt;Bar Chart&lt;/h5&gt;
                      &lt;img src="images/chart_bar.png" alt="Bar Chart" width="96" height="72"&gt;                    
                  &lt;/li&gt;
                  &lt;li class="ui-widget-content ui-corner-tr"&gt;
                      &lt;h5 class="ui-widget-header"&gt;Column Chart&lt;/h5&gt;
                      &lt;img src="images/chart_column.png" alt="Column  Chart" width="96" height="72"&gt;                        
                      &lt;a href="link/to/dashboard/script/when/we/have/js/off" title="Add this gadget" class="ui-icon ui-icon-plus"&gt;&lt;/a&gt;
                  &lt;/li&gt;
                  &lt;li class="ui-widget-content ui-corner-tr"&gt;
                      &lt;h5 class="ui-widget-header"&gt;Line Chart&lt;/h5&gt;
                      &lt;img src="images/chart_line.png" alt="Line  Chart" width="96" height="72"&gt;
  
                  &lt;/li&gt;
              &lt;/ul&gt;                
          &lt;/div&gt;
          &lt;div class="col-md-8"&gt;
              &lt;div id="dashboard" class="ui-widget-content ui-state-default  "&gt;   &lt;-- DROPPABLE DASHBOARD --&gt;
                  &lt;h4 class=""&gt;&lt;span class="ui-icon ui-icon-image"&gt;&lt;/span&gt;Dashboard&lt;/h4&gt;
              &lt;/div&gt;
          &lt;div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  &lt;/section&gt;
  </code></pre>
  
  <p></p>
  
  <p>The CSS :</p>
  
  <pre><code>&lt;style&gt;    
  .ui-widget-header{
      font-size: 65%;
      font-family: "Trebuchet MS", "Helvetica", "Arial", "Verdana", "sans-serif";      
  }
  .ui-state-highlight {
      border: 2px dashed #d3d3d3;  /* override to show dashed border when dragging */
  }
  #gallery {
      float: left;
      width: 75%;
      min-height: 12em;
  }
  
  .gallery.custom-state-active {
      background: #eee;
  }
  
  .gallery li {
      list-style: none;
      float: left;
      width: 96px;
      padding: 0.4em;
      margin: 0 0.4em 0.4em 0;
      text-align: center;
  }
  
      .gallery li h5 {
          margin: 0 0 0.4em;
          cursor: move;
      }
  
      .gallery li a {
          float: right;
      }
  
          .gallery li a.ui-icon-zoomin {
              float: left;
          }
  
      .gallery li img {
          width: 100%;
          cursor: move;
      }
  
  #dashboard {
      float: left;
      width: 45%;
      height:500px;
      padding: 1%;
  }
  
      #dashboard h4 {
          line-height: 25px;
          margin: 0 0 0.4em;
      }
  
          #dashboard h4 .ui-icon {
              float: left;
          }
  
      #dashboard .gallery h5 {
          display: none;
      }
  </code></pre>
  
  <p></p>
  
  <p>The JavaScript to create drag/drop areas :</p>
  
  <pre><code>&lt;script&gt;
  $(function () {
      // there's the gallery and the dashboard
      var $gallery = $("#gallery"),
        $dashboard = $("#dashboard");
  
      // let the gallery items be draggable
      $("li", $gallery).draggable({
          cancel: "a.ui-icon", // clicking an icon won't initiate dragging
          revert: "invalid", // when not dropped, the item will revert back to its initial position
          containment: "document",
          helper: "clone",
          cursor: "move"
      });
  
      // let the dashboard be droppable, accepting the gallery items
      $dashboard.droppable({
          accept: "#gallery &gt; li",
          activeClass: "ui-state-highlight",
          drop: function (event, ui) {
              debugger;
              deleteImage(ui.draggable);
          }
      });
  
      // let the gallery be droppable as well, accepting items from the dashboard
      $gallery.droppable({
          accept: "#dashboard li",
          activeClass: "custom-state-active",
          drop: function (event, ui) {
              recycleImage(ui.draggable);
          }
      });
  
      // image deletion function
      var recycle_icon = "&lt;a href='link/to/recycle/script/when/we/have/js/off' title='Remove gadget' class='ui-icon ui-icon-minus'&gt;&lt;/a&gt;";
      function deleteImage($item) {
          $item.fadeOut(function () {
              var $list = $("ul", $dashboard).length ?
                $("ul", $dashboard) :
                $("&lt;ul class='gallery ui-helper-reset'/&gt;").appendTo($dashboard);
  
              //$item.find("a.ui-icon-dashboard").remove();   // DO NOT REMOVE ORIGINAL WIDGET ICON - 11/19/2014 BM:
              $item.append(recycle_icon).appendTo($list).fadeIn(function () {
                  //$item.animate({ width: "48px" }).find("img").animate({ height: "36px" });
                  $item.animate().find("img").animate();
              });
          });
      }
  
      // image recycle function
      var dashboard_icon = "&lt;a href='link/to/dashboard/script/when/we/have/js/off' title='Add this gadget' class='ui-icon ui-icon-plus'&lt;/a&gt;";
      function recycleImage($item) {
          $item.fadeOut(function () {
              $item
                .find("a.ui-icon-refresh")
                  .remove()
                .end()
                .css("width", "96px")
                .append(dashboard_icon)
                .find("img")
                  .css("height", "72px")
                .end()
                .appendTo($gallery)
                .fadeIn();
          });
      }
  
      // image preview function, demonstrating the ui.dialog used as a modal window
      function viewLargerImage($link) {
          var src = $link.attr("href"),
            title = $link.siblings("img").attr("alt"),
            $modal = $("img[src$='" + src + "']");
  
          if ($modal.length) {
              $modal.dialog("open");
          } else {
              var img = $("&lt;img alt='" + title + "' width='384' height='288' style='display: none; padding: 8px;' /&gt;")
                .attr("src", src).appendTo("body");
              setTimeout(function () {
                  img.dialog({
                      title: title,
                      width: 400,
                      modal: true
                  });
              }, 1);
          }
      }
  
      // resolve the icons behavior with event delegation
      $("ul.gallery &gt; li").click(function (event) {
          var $item = $(this),
            $target = $(event.target);
  
          if ($target.is("a.ui-icon-dashboard")) {
              deleteImage($item);
          } else if ($target.is("a.ui-icon-zoomin")) {
              viewLargerImage($target);
          } else if ($target.is("a.ui-icon-refresh")) {
              recycleImage($item);
          }
  
          return false;
      });
  });
  </code></pre>
  
  <p></p>