Two JQuery questions about this fiddle

Two questions about this fiddle. 开发者_运维知识库

http://jsfiddle.net/mjmitche/4emqh/2/

1) Originally, the black box (with div id "cloud")moves to the right and you can drag it into the pink box. However, when I tried to add a second box (in green) with div id "cloud2", it stopped the animation of the black. You can see in the fiddle how I tried to add green/cloud2. What is the right way to do it? I thought you can stack elements beside each other (with a comma or semi colon) like I did with #cloud and #cloud2 in this fiddle.

2) when the black box is dragged into the pink box, the pink box gives a message "dropped" in black letters. Is there a way to change the color of the message to make it white, for example?

Thanks for your help

Is this what you wanted?

http://jsfiddle.net/4emqh/5/

When you select multiple items in a single selector, your selectors should be joined with comma and all one string. (e.g. $("#item1, #item2"))

You probably want to add a class that specifies a white color, but this in the drop function will achieve what you want as an example of 'a way' to do it:

drop: function(event, ui) {
    $(this).addClass("ui-state-highlight")
           .css("color", "white")
           .find("p")
           .html("Dropped!");

quick edit

BumbleB2na's suggesting of adding a class (or otherwise selecting in css) the p tag is much cleaner.

Why don't you do it like this? http://jsfiddle.net/4emqh/6/