我正在尝试旋转和调整元素大小(我的roomplanner中的'家具')。 每个元素(图像)都包含一个div。这个div是可拖动的,图像可以旋转。在我用于调整大小的图像周围有第二个div。
<div class="element furniture" height="53" width="146">
<div class="imageholder">
<img width="146" height="53" src="/images/furniture/bankstel_3zits.png" />
</div>
</div>
旋转后,我将div的高度设置为图像的宽度,div的宽度设置为图像的高度。但是,当我旋转时,div位于另一个位置,然后是里面的图像..我尝试使用边距,但我想这不是正确的解决方案?
我已经设置了一个例子: http://jsfiddle.net/Hqcnh/6/
答案 0 :(得分:1)
旋转父div,其他一切将旋转
$(document).ready(function () {
$('.rotate').click(function () {
Rotate();
});
function Rotate(){
var clickedElement = $('.element.furniture');
var imageHolder = clickedElement.find('.imageholder');
var clickedElementToRotate = $('.element.furniture');
var degrees = 90;
if (typeof (clickedElementToRotate.attr('rotate')) !== 'undefined') {
degrees = parseFloat(clickedElementToRotate.attr('rotate')) + 90;
}
clickedElementToRotate.attr('rotate', degrees);
clickedElementToRotate.cssrotate(degrees);
if (degrees == 90 || degrees == 270) {
clickedElementToRotate.attr('data-width', clickedElementToRotate.height()).attr('data-height', clickedElementToRotate.width());
} else {
clickedElementToRotate.attr('data-width', clickedElementToRotate.width()).attr('data-height', clickedElementToRotate.height());
}
}
$("div.element.furniture").each(function () {
var div = $(this);
var img = $(this).find('img');
div.draggable();
div.css('border', '1px solid red');
div.width(img.width());
div.height(img.height());
img.wrap('<div class="imageholder" />');
div.find('.imageholder').css('border', '1px solid blue').css('width', div.width());
div.find('.imageholder').css('height', div.height());
div.find('.imageholder').resizable({
handles: "n, e, s, w",
aspectRatio: true,
resize: function (event, ui) {
if (img.attr('rotate') == 90 || img.attr('rotate') == 270) {
img.css('width', ui.size.height);
img.css('height', ui.size.width);
} else {
img.css('width', ui.size.width);
img.css('height', ui.size.height);
}
div.css('width', ui.size.width);
div.css('height', ui.size.height);
}
});
});
});
(function ($) {
var _e = document.createElement("canvas").width;
$.fn.cssrotate = function (d) {
return this.css({
'-moz-transform': 'rotate(' + d + 'deg)',
'-webkit-transform': 'rotate(' + d + 'deg)',
'-o-transform': 'rotate(' + d + 'deg)',
'-ms-transform': 'rotate(' + d + 'deg)'
}).prop("rotate", _e ? d : null);
};
var $_fx_step_default = $.fx.step._default;
$.fx.step._default = function (fx) {
if (fx.prop != "rotate") return $_fx_step_default(fx);
if (typeof fx.elem.rotate == "undefined") fx.start = fx.elem.rotate = 0;
$(fx.elem).cssrotate(fx.now);
};
})(jQuery);
请在此处查看此小提琴FIDDLE