具有不同拖放動作的多個可拖動對象

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/