Доброго времени суток!
Пишу для сайта функционал, который группирует несколько объектов в один div и позволяет работать с ними, как с группой, т.е. изменять размер, крутить и т.п. Проблема возникла с сохранением параметров этих объектов внутри общего div'а, а именно не получается задать им правильную позицию с помощью offset.
function grouped_objects_saving(merged_block_id){
var count = $("#"+merged_block_id+" > .merged").length;
var angle = transform_to_angle(merged_block_id);
var scaleX = transform_to_scale(merged_block_id, "x");
var scaleY = transform_to_scale(merged_block_id, "y");
var brows = browser();
var topOff = [];
var leftOff = [];
var objId = [];
var width = [];
var height = [];
var imageAngle = [];
var resultAngle = [];
var transform = "";
var check = false;
switch(brows){
case "Chrome":
transform = $('#'+merged_block_id).css('-webkit-transform');
break;
case "IE":
transform = $('#'+merged_block_id).css('-ms-transform');
break;
case "Firefox":
transform = $('#'+merged_block_id).css('-moz-transform');
break;
default:
transform = $('#'+merged_block_id).css('transform');
break;
}
for (i=0; i<count; i++) {
objId[i] = $("#"+merged_block_id+" > .merged").eq(i).attr('id');
topOff[i] = $("#"+merged_block_id+" > .merged").eq(i).offset().top;
leftOff[i] = $("#"+merged_block_id+" > .merged").eq(i).offset().left;
width[i] = $("#"+objId[i]).width();
height[i] = $("#"+objId[i]).height();
imageAngle[i] = transform_to_angle(objId[i]);
resultAngle[i] = imageAngle[i]+angle;
$("#"+objId[i]).offset({top: topOff[i], left: leftOff[i]});
}
for (i=0; i<count; i++) {
$("#"+objId[i]).appendTo($('#workarea'));
switch(brows){
case "Chrome":
$("#"+objId[i]).css({'-webkit-transform': 'rotate('+resultAngle[i]+'deg)'});
break;
case "IE":
$("#"+objId[i]).css({'-ms-transform': 'rotate('+resultAngle[i]+'deg)'});
break;
case "Firefox":
$("#"+objId[i]).css({'-moz-transform': 'rotate('+resultAngle[i]+'deg)'});
break;
default:
$("#"+objId[i]).css({'transform': 'rotate('+resultAngle[i]+'deg)'});
break;
}
$("#"+objId[i]).width(width[i]*scaleX);
$("#"+objId[i]).height(height[i]*scaleY);
$("#"+objId[i]).css({"position": "relative"});
$("#"+objId[i]).appendTo($('#'+merged_block_id));
//$("#"+objId[i]).addClass("editable selectable");
if (i==count-1) {
check = true;
}
}
if (check==true){
for (i=0; i<count; i++) {
console.log('$("#'+objId[i]+'").offset({top:'+topOff[i]+', left:'+leftOff[i]+'});');
$("#"+objId[i]).offset({top: topOff[i], left: leftOff[i]});
}
}
return true;
}
Проблема заключается в последних строках:
$("#"+objId[i]).offset({top: topOff[i], left: leftOff[i]});
Offset просто не устанавливается. Причем, если я скопирую строку, которая приходит в браузер отсюда:
console.log('$("#'+objId[i]+'").offset({top:'+topOff[i]+', left:'+leftOff[i]+'});'
например
$("#custom-image-58clx").offset({top:393.089111328125, left:407.17822265625});
и просто запущу её в консоли, то всё устанавливается правильно.
Бьюсь уже который час, пытаюсь понять причины такого поведения, но ничего не выходит.
