JQuery：拖放到具有可调整大小选项的另一个项目后，拖动的项目被隐藏答案

【问题标题】：JQuery: Dragged item is getting hidden after drop into another item with resizable optionJQuery：拖放到具有可调整大小选项的另一个项目后，拖动的项目被隐藏
【发布时间】：2013-05-14 06:59:47
【问题描述】：

我有 2 个 DIV 标签，一个用于可拖动，另一个用于可放置。拖放工作正常。但是，如果我为可放置元素覆盖可调整大小的方法，则拖动的项目将被隐藏。它应该出现在目标项目的顶部。我已经包含了完整的代码。请帮我。提前致谢。

    <!doctype html>
<html lang="en">
 <head>
<meta charset="utf-8">
<title>jQuery UI Resizable - Synchronous resize</title>
<link rel="stylesheet" href="../../themes/base/jquery.ui.all.css">
<script src="../../jquery-1.9.1.js"></script>
<script src="../../ui/jquery.ui.core.js"></script>
<script src="../../ui/jquery.ui.widget.js"></script>
<script src="../../ui/jquery.ui.mouse.js"></script>
<script src="../../ui/jquery.ui.resizable.js"></script>
<script src="../../ui/jquery.ui.draggable.js"></script>
<script src="../../ui/jquery.ui.droppable.js"></script>
<link rel="stylesheet" href="../demos.css">
<style>
#draggable { width: 100px; height: 100px; padding: 0.5em; float: left; margin: 10px 10px 10px 0; }
#dropTarget1 { width: 150px; height: 150px; padding: 0.5em;  margin: 10px; }
#dropTarget2A { width: 150px; height: 150px; padding: 0.5em; float: left; margin: 0px; }
#dropTarget2B { width: 150px; height: 150px; padding: 0.5em;  margin: 0px; }
</style>
<script>
$(function() {

    $( "#draggable" ).draggable();
    //Droppable events
    $( "#dropTarget1" ).droppable({
        drop: function( event, ui ) {
            $( this )
                .find( "p" )
                    .html( "Dropped at Target 1!" );
        }
    });
    $( "#dropTarget2A" ).droppable({
        drop: function( event, ui ) {
            $( this )
                .find( "p" )
                    .html( "Dropped at Target 2A!" );
        }
    });
    $( "#dropTarget2B" ).droppable({
        drop: function( event, ui ) {
            $( this )
                .find( "p" )
                    .html( "Dropped at Target 2B!" );
        }
    });
    //Resizable events
    $( "#dropTarget2A" ).resizable(
    {
        resize: function(event, ui){
            $("#dropTarget2B").css("height", ui.size.height+"px");
        }
    });
    $( "#dropTarget2B" ).resizable(
    {
        resize: function(event, ui){
            $("#dropTarget2A").css("height", ui.size.height+"px");  
        }
    });         
});
</script>
    </head>
    <body>
   <div id="draggable" class="ui-widget-content"><p>Drag me to my target</p></div>
    <div id="dropTarget1" class="ui-widget-content"><p>Target 1</p></div>
    <div id="dropTarget2A" class="ui-widget-content"><p>Target 2A</p></div>
   <div id="dropTarget2B" class="ui-widget-content"><p>Target 2B</p></div>
   </body>
    </html>

【问题讨论】：

标签： jquery html draggable droppable resizable

【解决方案1】：

我认为在你的 CSS 中包含 z-index 属性就可以了。对于 draggable 设置比 droppable 更高的 z-index 以便可拖动始终在 droppable 上可见。将以下代码添加到您的 CSS：

#draggable { z-index:1 }
#dropTarget1 { z-index:0 }
#dropTarget2A { z-index:0 }
#dropTarget2B { z-index:0 }

这里正在工作jsFiddle

【讨论】：