Question

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

    <!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>

Answer 1

我认为通过在你的css中包含 z-index 属性可以完成工作。对于可拖动设置更高的z-index而不是droppable，以便drappable始终在droppable上可见。将以下代码添加到CSS：

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

这是有效的jsFiddle

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

1 个答案: