Align draggable elements in line and generate without overflow or new line

Align draggable elements in line and generate without overflow or new line

I have this script I'm working on. What it should do is generate a new div
every time I press a button and I've already done that, but those are not
draggable. I think that happens because of the onLoad function but
alternative do I have? The second problem is that when I click one of the
blue boxes, all of them must arrange in a line like you see them when you
load my jsFiddle link, and if the line is full and you click the "New
Square" button, instead of overflowing or add a new line, it would close
the last box instead and add a new box before all of the other boxes.
I'm sorry to bother you with those questions, but I am a PHP and MySQL
programmer, I just started using jQuery.
jsFiddle
HTML:
<div id="container">
<div class="round"></div>
<div class="round"></div>
<div class="round"></div>
<div class="round"></div>
</div>
<br><br><br>
<input type="button" class="button" value="New Square">
jQuery:
$('.round').draggable();
$('.button').click(
function (){
$("#container").append("<div class='round'></div>");
});
$('.round').click (
);
I had more code in jQuery, but I removed all of the useless options
because I want you to easily understand what I want to do.