0

2 つの DIV タグがあり、1 つはドラッグ可能で、もう 1 つはドロップ可能です。ドラッグアンドドロップは正常に機能しています。しかし、ドロップ可能な要素のサイズ変更可能なメソッドをオーバーライドすると、ドラッグされたアイテムが非表示になります。対象アイテムの上に表示されるはずです。完全なコードを含めました。私を助けてください。前もって感謝します。

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

1 に答える 1