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

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

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

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

          #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; }   $(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!" ); } }); }); });    
 
Drag 1
 
 
 
Drag 2
 
 
 
Drop 1
 
 
 
Drop 2
 
 
 
Drop 3
 
   

截图 –