мне нужно из кода выгрузить все див блоки с классом element, вернее мне нужно их положение подскажите как это можно сделать?
<html>
<title>GIRD</title>
<SCRIPT src="http://code.jquery.com/jquery-1.9.1.js"></SCRIPT>
<SCRIPT src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></SCRIPT>
<SCRIPT>
function add() {
var d=document.createElement('div');
d.style.width='100px';
d.style.height='100px';
d.className = 'element';
//d.style.position='absolute';
d.style.background='red';
document.getElementById('grid').appendChild(d);
setAsDraggable();
}
function setAsDraggable() {
$(".element").draggable({
containment: '#grid',
cursor: 'move',
snap: '.element',
addClasses: false,
opacity:0.5,
stop: function(event, ui) { alert(ui.offset.top+";"+ui.offset.left) }
});
}
</SCRIPT>
<script type=text/javascript>
function recovery() {
var d=document.createElement('div');
d.style.width='100px';
d.style.height='100px';
//d.id = 'myPId';
d.className = 'element';
d.style.background='green';
//d.style.position='absolute';
d.style.left='567px';
d.style.top='32px';
document.getElementById('grid').appendChild(d);
}
</script>
<body>
<style>
#grid {
width:200px;
height:200px;
border: solid 1px grey;
}
.horisontal, .vertical {
border: solid 1px grey;
position:absolute;
}
.horisontal {
border-left-width: 0px;
border-right-width: 0px;
position: absolute;
}
.vertical {
border-top-width: 0px;
border-bottom-width: 0px;
position: absolute;
}
.element{
width:99px;
height:99px;
border: solid 1px black;
background:green;
position:relative;
}
#element{
border: solid 2px black;
background:red;
}
</style>
<INPUT onclick="add();return false;" value=Добавить type=button name=Добавить>
<INPUT onclick="recovery();return false;" value=Востановить type=button name=Востановить>
<div id="grid"></div>
<div id="total"></div>
<div class="element"></div>
<div class="element"></div>
<script type=text/javascript>
var div = document.getElementById('grid');
var gridStep = 20; // Шаг сетки
var gridWidth = 1; // Толщина линии сетки
var width = 660; // Ширина блока
var height = 900; // Высота блока
var div = document.getElementById('grid');
div.style.height = height + 'px';
div.style.width = width + 'px';
var verticalLinesNum = Math.ceil(width / gridStep);
var horisontalLinesNum = Math.ceil(height / gridStep);
for (var i = 0; i < horisontalLinesNum / 2; i++) {
var lines = document.createElement('div');
lines = div.appendChild(lines);
lines.className = 'horisontal';
lines.style.height = (2 * i + 1) * gridStep + 'px';
lines.style.width = width + 'px';
lines.style.borderTopWidth = lines.style.borderBottomWidth = gridWidth + 'px';
lines.style.marginTop = (height - parseInt(lines.style.height)) / 2 + 'px';
lines.style.overflow = 'hidden';
}
for (var j = 0; j < verticalLinesNum / 2; j++) {
var lines = document.createElement('div');
lines = div.appendChild(lines);
lines.className = 'vertical';
lines.style.width = (2 * j + 1) * gridStep + 'px';
lines.style.height = height + 'px';
lines.style.borderLeftWidth = lines.style.borderRightWidth = gridWidth + 'px';
lines.style.marginLeft = (width - parseInt(lines.style.width)) / 2 + 'px';
}
var total = document.getElementById('total');
total.innerHTML = 'Создано внутренних блоков: ' + (i + j);
</script>
</body>
</html>
