Position of generated DIVs - help
Hello, i'm trying to build an app that generates multiple DIVs into a
containment DIV clicking a simple icon, via JQuery.
The containment layer is
<div id="layer0">
</div>
styled this way
div#layer0 { background: #727EA3; color: #FFF; width: 300px; height:
200px; margin: 5px; font-size: 10px; font-family: Arial;}
the generated DIVs are styled this way
div#layer1 { background: #00AA00; color: #1FA; width: 50px; height:
50px;}
div#layer2 { background: #EE1100; color: #1FA; width: 50px; height:
50px;}
div#layer3 { background: #EE11CC; color: #1FA; width: 50px; height:
50px;}
then, the generating code is
$(document).ready(function(){
var layers = 0;
//BUTTON GENERATORE DI DIV DRAGGABILI
$("#add").click(function(){
layers = layers + 1;
if (layers==1) {
$("div#layer0").append("<div id=\"layer" + layers + "\"></div>");
$("div#layer" + layers).draggable({
containment: 'parent',
stop:
function(e,ui){
$("div#layer" + layers).html(ui.position.left +', '+
ui.position.top);
}
});
} else {
$("div#layer0").append("<div id=\"layer" + layers + "\"></div>");
$("div#layer" + layers).draggable({
containment: 'parent',
stop:
function(e,ui){
//coord = ui.position.top - layers*50;
$("div#layer" + layers).html(ui.position.left +', '+
ui.position.top);
}
});
}
});
});
So when i click the icon, the DIVs are correctly generated INTO layer0
DIV and one below the other.
My question is: how could i generate every DIV from the 0,0 coord of
layer0 without pushing/pulling the others? Plus, when i append every
new DIV after the last one generated, the coordinates ui.position get
an offset automagically. Is there a turnaround?
Thank you in advance.