Bootstrap 3列类干扰jquery-ui droppable div

我使用jQuery-UI v1.11.2来创建一些可拖动和可拖放的div，以及Boostrap 3.1.1。

我想知道为什么Boostrap列类会干扰可拖动的“提示”。

换句话说，当我将图像从Gallery div拖动到Dashboard div时，Dashboard div出现在图像提示的前面。然后，一旦我在Dashboard div上删除我的图像，该图像就会重新出现。

如果我从仪表板div中删除col-md-8类，则此问题将消失。

这是两个屏幕快照，以演示：

1）在右侧div上没有Bootstrap列类（图像提示看起来不错）

2）在右侧div上使用Bootstrap列类（图像提示消失）

这是HTML代码：

<section id="gadgets-view" class="mainbar" data-ng-controller="gadgets">

<div class="container-fluid">                       
    <div class="row-fluid">
        <!-- based on http://jqueryui.com/droppable/#photo-manager -->
        <div class="ui-widget ui-helper-clearfix  col-md-4">    <-- GALLERY OF WIDGETS -->
            <ul id="gallery" class="gallery ui-helper-reset ui-helper-clearfix">
                <li class="ui-widget-content ui-corner-tr">
                    <h5 class="ui-widget-header">Tree Grid</h5>                    
                    <img src="images/treegrid.jpg" alt="Hierarchy Grid" width="96" height="72">
                </li>
                <li class="ui-widget-content ui-corner-tr">
                    <h5 class="ui-widget-header">Area Chart</h5>
                    <img src="images/chart_area.jpg" alt="Area Chart" width="96" height="72">

                </li>
                <li class="ui-widget-content ui-corner-tr">
                    <h5 class="ui-widget-header">Bar Chart</h5>
                    <img src="images/chart_bar.png" alt="Bar Chart" width="96" height="72">                    
                </li>
                <li class="ui-widget-content ui-corner-tr">
                    <h5 class="ui-widget-header">Column Chart</h5>
                    <img src="images/chart_column.png" alt="Column  Chart" width="96" height="72">                        
                    <a href="link/to/dashboard/script/when/we/have/js/off" title="Add this gadget" class="ui-icon ui-icon-plus"></a>
                </li>
                <li class="ui-widget-content ui-corner-tr">
                    <h5 class="ui-widget-header">Line Chart</h5>
                    <img src="images/chart_line.png" alt="Line  Chart" width="96" height="72">

                </li>
            </ul>                
        </div>
        <div class="col-md-8">
            <div id="dashboard" class="ui-widget-content ui-state-default  ">   <-- DROPPABLE DASHBOARD -->
                <h4 class=""><span class="ui-icon ui-icon-image"></span>Dashboard</h4>
            </div>
        <div>
    </div>
</div>
</section>

CSS：

<style>    
.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;
    }

创建拖放区域的JavaScript：

<script>
$(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 > 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 = "<a href='link/to/recycle/script/when/we/have/js/off' title='Remove gadget' class='ui-icon ui-icon-minus'></a>";
    function deleteImage($item) {
        $item.fadeOut(function () {
            var $list = $("ul", $dashboard).length ?
              $("ul", $dashboard) :
              $("<ul class='gallery ui-helper-reset'/>").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 = "<a href='link/to/dashboard/script/when/we/have/js/off' title='Add this gadget' class='ui-icon ui-icon-plus'</a>";
    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 = $("<img alt='" + title + "' width='384' height='288' style='display: none; padding: 8px;' />")
              .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 > 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;
    });
});