具有不同拖放动作的多个可拖动对象

Question

是否可以具有多个拖动对象和一个可拖放对象，但具有不同的可拖放功能？请看看我的代码和我的例子。我试图完成，当你放弃第二个股利时，它说“你放弃了另一个”。我打算制作更多可拖动的div，但是对于此示例，我只使用了两个可拖动和一个可拖放的div。

JsFiddle

JS

$("#draggable_one").draggable({ 

    revert: true 
}); 


$("#draggable_two").draggable({ 

    revert: true 
}); 

$("#theonlydroppable").droppable({ 
    drop: function(event, ui) { 
    $(this).html("you dropped one"); 

    } 
}); 

HTML

  <div id="draggable_one"> 
      draggable one 
     </div> 
     <div id="draggable_two"> 
      draggable two 
     </div> 

     <div id="theonlydroppable"> 
      Drop it like it's hot 
     </div> 

Answer 1

只需添加一个条件，以检查其拖动被放弃了，并采取适当的措施：

$("#theonlydroppable").droppable({ 
    drop: function(event, ui) { 
     if (ui.draggable.is('#draggable_one')) { 
      $(this).html("you dropped one"); 
     } else { 
      $(this).html("you dropped the other one"); 
     } 
    } 
}); 

这是一个演示：http://jsfiddle.net/yMDB3/1/