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.
you have to assign the draggable class to the newly created object:
$('.button').click(
function (){
$("#container").append("<div class='round'></div>");
$(".round").draggable();
});
That should do it actually. Or Perhaps:
$("#container").append("<div class='round draggable'></div>");
2