使div在每个浏览器中均可旋转 [英] Make div rotatable in every browser

问题描述

首先我见过 在jQuery中旋转Div元素，但是没有给我我想要的解决方案.

First i have seen Rotating a Div Element in jQuery but it didnt give me the solution i wished.

我的div中有可拖动的div.

I have a div with draggable divs in it.

因此，在div睡眠中有1个具有div的主要div(无聊)(类睡眠)是将图像缩放到div的宽度和高度的100％(保持宽高比).

so 1 main div (bord) with divs in it(class sleep) in the divs sleep are images wich are scaled to 100% width and height of the div(keeping aspect ratio).

div的大小可调整且可拖动.

THe divs are resizable and draggable.

我希望图像(divs)能够与右上角的处理程序一起旋转，就像右下角的调整大小一样.

i want the images (divs) to be able to rotate with a handler on the top right side like with resize on the lower right corner.

此刻在div板上放置的1张图片的html看起来像

At the moment the html of 1 dropped image in the div board looks like.

<div class="ui-draggable sleep ui-resizable" style="position: absolute; z-index: 1; left: 125px; top: 46px;">
  <img src="/imgurl.jpg" class="center">
  <div class="ui-resizable-handle ui-resizable-e" style="z-index: 90;"></div>
  <div class="ui-resizable-handle ui-resizable-s" style="z-index: 90;"></div>
  <div class="ui-resizable-handle ui-resizable-se ui-icon ui-icon-gripsmall-diagonal-se" style="z-index: 90;"></div>
</div>

可拖动/可调整大小项目的jQuery

The Jquery for the draggable/resizable items

.draggable({stack: ".sleep", containment: '#bord' })
    .resizable
    ({containment:'#bord',aspectRatio: true})
    .css({position: 'absolute'})

我想使其在每个浏览器中均可旋转.

I want to make it rotatable in EVERY BROWSER.

有人可以用正确的方式帮助我吗?

Can some one help me in the right way?

编辑更明确的问题:

我希望放置的div可以像此网站一样旋转: http://mydeco.floorplanner .com/rooms/moodboard/

I want a dropped div to be rotatable like on this site: http://mydeco.floorplanner.com/rooms/moodboard/

我正在制作类似于该网站的内容:我的div上的图片可以删除.

i am making something that looks like that site: i have divs with images wich can be dropped.

放下后，我希望它们可以与处理程序一起旋转.

After the drop i want them to be rotatable with a handler.

我已使divs可拖放调整大小和可拖动.参见上面的代码.

I have made the divs droppable resizable and draggable. see code above.

但是我根本没有理由从发布问题的可旋转性开始.

BUT I HAVE NO IDEA WHERE TO START WITH ROTATABLE THATS WHY I POSTED THE QUESTION.

我没有例子，因为我不知道从哪里开始.

I DONT HAVE EXAMPLES CAUSE I DONT KNOW WHERE TO START.

我已经批准了，所以做了一个测试页，但是效果不好.

I have made a test page were i got a bit ratating but it isnt working good.

您可以单击左侧的图像之一.

You can click on one of the images on the left side.

然后用白色边框标记它们，然后单击

then they get marked with a white border then click

Omhoog Rechts Omlaag更改方向的链接.但我希望他们使用处理程序而不是按钮来转身.

Omhoog Rechts Omlaag Links to change directions. but i want them to turn around with handlers not buttons.

有600余行代码，其中大多数是php和jquery，我尝试进行摆弄，但代码太多.所有jquery在源代码中都是可见的.

There are over 600 lines of code most of them php and jquery i tryd to make a fiddle but its to much code. all jquery is viewable in source.

推荐答案

由于对我来说这很有趣，因为我知道将来可能会需要这样的东西，因此我比平时做更多的研究，因为发现了完美的解决方案.

Since this was very interesting to me because I know in the future i might need something like this, I did more research than usual and im happy because i found the perfect solution.

看看这个JQuery插件 https://github.com/gthmb/jquery-free-transform

Take a look at this JQuery plugin https://github.com/gthmb/jquery-free-transform

此插件不仅可以旋转，还可以自由变换元素，希望对您有所帮助.

This plugin not only allows you to rotate but to free-transform the element, hope you find it helpful.

这篇关于使div在每个浏览器中均可旋转的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！