Question

我正在尝试在3个可放置的图像上拖动2个图像。当我在drop1上拖动第一个图像时，它会打印Drop11，类似于drag2和drag3，它会打印Drop12和Drop13。当我拖动第二个图像时，它必须打印Drag21，Drag22和Drag23 resp。

一切正常，但是当我将第一张图像拖过任何一张图片时，它会打印它应该的内容。但在那之后，如果我将第二个拖动图像拖到任何可拖动图像上，它首先打印第一个droppale的msg，当我再次将它放在那里时，它会打印第二个droppable的msg（意味着它首先打印13个，如果拖动则打印23个）再次）。它就是这样的。

我的代码有什么问题..？我的代码是

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery UI Droppable - Default functionality</title>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css">
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<link rel="stylesheet" href="/resources/demos/style.css">

<style>
#draggable1 { width: 100px; height: 100px; padding: 0.5em; float: left; margin: 10px 10px 10px 0; }
#draggable2 { width: 100px; height: 100px; padding: 0.5em; float: left; margin: 10px 10px 10px 0; }
#droppable1 { width: 150px; height: 150px; padding: 0.5em; float: left; margin: 10px; }
#droppable2 { width: 150px; height: 150px; padding: 0.5em; float: left; margin: 10px; }
#droppable3 { width: 150px; height: 150px; padding: 0.5em; float: left; margin: 10px; }
</style>

<script>
$(document).ready(function() {
    $("#draggable1").click(function(){
        $( "#draggable1" ).draggable();
        $( "#droppable1" ).droppable({  
            drop: function( event, ui ) {
            $( this )
            .addClass( "ui-state-highlight" )
            .find( "p" )
            .html( "Dropped 11!" );
            }
        });
    });
});
$(document).ready(function() {
    $("#draggable1").click(function(){
        $( "#draggable1" ).draggable();
        $( "#droppable2" ).droppable({  
            drop: function( event, ui ) {
            $( this )
            .addClass( "ui-state-highlight" )
            .find( "p" )
            .html( "Dropped 12!" );
            }
        });
    });
});
$(document).ready(function() {
    $("#draggable1").click(function(){
        $( "#draggable1" ).draggable();
        $( "#droppable3" ).droppable({  
            drop: function( event, ui ) {
            $( this )
            .addClass( "ui-state-highlight" )
            .find( "p" )
            .html( "Dropped 13!" );
            }
        });
    });
});
$(document).ready(function() {
    $("#draggable2").click(function(){
        $( "#draggable2" ).draggable();
        $( "#droppable1" ).droppable({  
            drop: function( event, ui ) {
            $( this )
            .addClass( "ui-state-highlight" )
            .find( "p" )
            .html( "Dropped 21!" );
            }
        });
    });
});
$(document).ready(function() {
    $("#draggable2").click(function(){
        $( "#draggable2" ).draggable();
        $( "#droppable2" ).droppable({  
            drop: function( event, ui ) {
            $( this )
            .addClass( "ui-state-highlight" )
            .find( "p" )
            .html( "Dropped 22!" );
            }
        });
    });
});
$(document).ready(function() {
    $("#draggable2").click(function(){
        $( "#draggable2" ).draggable();
        $( "#droppable3" ).droppable({  
            drop: function( event, ui ) {
            $( this )
            .addClass( "ui-state-highlight" )
            .find( "p" )
            .html( "Dropped 23!" );
            }
        });
    });
});
</script>

</head>
<body>
<div id="draggable1" class="ui-widget-content">
<p>Drag 1</p>
</div>
<div id="draggable2" class="ui-widget-content">
<p>Drag 2</p>
</div>
<div id="droppable1" class="ui-widget-header">
<p>Drop 1</p>
</div>
<div id="droppable2" class="ui-widget-header">
<p>Drop 2</p>
</div>
<div id="droppable3" class="ui-widget-header">
<p>Drop 3</p>
</div>
</body>
</html>

截图 -

First Screen

Second Screen

可拖动和可放置图像时出错

0 个答案: