Draggable/Droppable question

Draggable/Droppable question


I spent a couple of hours digging through docs and examples last
night, and I couldn't find an answer to what seems a simple question.
I am a jQuery newbie, so sorry if this is a FAQ.
I am playing with the draggable demo code on jquery.com, and I am
trying to modify it so that I can have multiple images as draggables,
and then when I drop them into the droppable, it will show the dropped
image. But I can't figure out how to display the correct image.
Here's some code:
$(document).ready(function(){
$(".ship").draggable({helper: 'clone'});
$(".ship2").draggable({helper: 'clone'});
$(".drop").droppable({
accept: ".ship,.ship2",
activeClass: 'droppable-active',
hoverClass: 'droppable-hover',
drop: function(ev, ui) {
$(this).append("<img src='USS_Barry.jpg' />");
}
});
});
<img class="ship" src="USS_Barry.jpg" /><br />
<img class="ship2" src="USS_Lexington.jpg" />
<div class="drop"></div>
I won't bore you with the CSS code. The above code works, but of
course if I drop in the second ship image, it displays the first ship
image. I have tried about 100 different combinations of everything I
could think of, and I can't get anything to work. It seems like I
oughta have an if statement (which is what I tried), but I can't
figure out what to key off of to figure out which image was dropped
into the droppable.
TIA for any help you can offer.