метод position
Здравствуйте, подскажите пожалуйста как при помощи метода position задавать позицию элемента на странице?
допустим у меня есть массив объектов defaultCoords []в котором хранятся объекты defaultCoords[i] = {
pos_x :"pos_x",
pos_y :"pos_y"
}
в какой то момент каждому элементу из некоторой выборки я хочу назначить позицию на странице вешаю обработчик на кнопку $('#join').on('click.joinMyFigure', function() {
$('.segment').each(function(indx,s){
var e=$(s);
e.position({left: defaultCoords[indx].pos_x,top: defaultCoords[indx].pos_y });
});
});
и.. ничего не происходит при нажатии позиция элементам не назначается. Почему? |
Moloch,
defaultCoords[indx]["pos_x"] |
неа . все равно не происходит ничего
|
Moloch,
Цитата:
<!DOCTYPE HTML>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style type="text/css">
.segment {
background: #FFCC00;
width: 100px;
height: 100px;
position: absolute;
}
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script>
$(function() {
var defaultCoords = [{
pos_x: 10,
pos_y: 20
}, {
pos_x: 30,
pos_y: 40
}];
$(".segment").each(function(indx, s) {
var e = $(s);
e.css({
left: defaultCoords[indx]["pos_x"],
top: defaultCoords[indx]["pos_y"]
})
})
});
</script>
</head>
<body>
<div class="segment">1</div>
<div class="segment">2</div>
</body>
</html>
|
Я использую UI и если для left и top я буду использовать css то координаты будут заданы не так как мне нужно вот на картинке пример того что получается. я конечно решил проблему обнулением css-ных top и left , но если я например захочу чтобы при нажатии кнопки блоки рандомно принимали координаты из заданного диапазона то мне не получится подружить" position.left и left
 |
Moloch,
почему position тогда а не offset-- замените тогда не на css а на offset |
Кстати! все получилось. Спасибо Вам. че я сразу не подумал так сделать
|
Moloch,
<!DOCTYPE HTML>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style type="text/css">
.segment {
background: #FFCC00;
width: 100px;
height: 100px;
position: relative;
float: left;
}
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script>
$(function() {
var defaultCoords = [], rand = function() {
return Math.floor(Math.random() * 200) + 10;
};
$(".segment").each(function(indx, s) {
var e = $(s).offset();
defaultCoords[indx] = {"pos_x" : e.left, "pos_y" : e.top}
}).css({"position" : "absolute"}).each(function(indx, s) {
var e = $(s);
e.offset({
left: rand(),
top: rand()
})
})
function animR()
{
$(".segment").each(function(indx, s) {
var e = $(s);
e.animate({
left: defaultCoords[indx]["pos_x"],
top: defaultCoords[indx]["pos_y"]
})
})
}
window.setTimeout(animR, 2000)
});
</script>
</head>
<body>
<div class="segment">1</div>
<div class="segment">2</div>
</body>
</html>
|
с position:absolute вообще все печально становится =( Вот код
<div id="wrapper"> <div class="container"> </div> <p><button id="dissect">Разрезать картинку</button></p> <p><button id="join">Собрать картинку</button></p> </div> <div class="coord"> <span class="number">1</span> <span class="x">2</span> <span class="y">3</span> </div> <style type="text/css">
.container+p {
clear: both;
}
.container {
background: url('1.png') no-repeat;
width: 646px;
height: 909px;
background-size:contain;
position: relative;
}
.coord span {
display: block;
font-size: 1.5em;
}
</style>
$(function(){
var defaultCoords = [];
function dissectMyFigure (num) {
var el = $('.container');
for (var i =0;i < num;i++) {
el.append('<div class = "segment"></div>')
}
var segment = $('.segment');
segment.css({'border':'1px solid black','float':'left','box-sizing':'border-box','background-image':'url("1.png")', 'overflow':'hidden'});
//segment.draggable();
segment.width(function(i,w){
w = el.width()/num*3;
return w;
});
segment.height(function(i,h){
h = el.height()/num*3;
return h;
});
el.css({'background':'transparent'});
segment.each(function(indx,self){
elm=$(self);
var pos_x=elm.position().left;
var pos_y=elm.position().top;
defaultCoords[indx] = {pos_x :pos_x,pos_y :pos_y};
elm.css({'background-position-x':'-'+pos_x+'px','background-position-y':'-'+pos_y+'px',})
//console.log('для '+indx+'элемента'+'x :'+pos_x+', y :'+pos_y);
elm.draggable({
start: function () {
$('.number').text('сегмент под номером: '+indx);
},
drag: function() {
$('.x').text("По Х: "+$(this).offset().left);
$('.y').text("По У: "+$(this).offset().top);
}
//console.log('координаты '+indx+' элемента по Х '+ elm.position().left +'по У'+elm.position().top);
});
});
};
$('#dissect').on('click.dissectMyFigure', function() {
dissectMyFigure(9);
});
$('#join').on('click.joinMyFigure', function() {
$('.segment').each(function(indx,s){
var e=$(s);
//e.draggable("destroy");
e.animate({
left:defaultCoords[indx]["pos_x"],
top:defaultCoords[indx]["pos_y"]
},2000, function(){
e.remove();
$('.container').css('background-image','url("1.png")');
});
//e.css({'left':defaultCoords[indx]["pos_x"]+'px','top':defaultCoords[indx]["pos_y"]+'px'});
//e.offset({left: defaultCoords[indx]["pos_x"],top: defaultCoords[indx]["pos_y"] });
});
});
});
|
Moloch,
можно весь макет сразу а не по блочно? |
| Часовой пояс GMT +3, время: 13:32. |