Question

首先我见过 Rotating a Div Element in jQuery但它并没有给我我想要的解决方案。

我有一个带有可拖动div的div。

所以在divs sleep中有一个div（bord）和div（class sleep）的图像是缩放到div的100％宽度和高度的图像（保持纵横比）。

div是可调整大小和可拖动的。

我希望图像（div）能够使用右上角的处理程序进行旋转，就像右下角的调整大小一样。

目前在div板上的1个html图像看起来像。

<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

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

我想让它在每个浏览器中都可以旋转。

有人能以正确的方式帮助我吗？

修改更明确的问题：

我希望丢弃的div可以在此网站上旋转：http://mydeco.floorplanner.com/rooms/moodboard/

我正在制作看起来像那个网站的东西：我有可以删除图像的div。

在掉落之后，我希望它们可以用处理程序旋转。

我已经使divs可以调整大小和可拖动。见上面的代码。

但我没有想法在哪里开始可以转动我为什么发布问题。

我没有举例说明我不知道从哪里开始。

example

我做了一个测试页面，我有点唠叨，但它不能正常工作。

您可以点击左侧的其中一张图片。

然后他们标有白色边框，然后点击

Omhoog Rechts Omlaag链接改变方向。但是我希望他们能够使用处理程序而不是按钮。

有超过600行代码，其中大多数是php和jquery我试图制作一个小提琴，但它的代码很多。所有jquery都可以在源代码中查看。

Answer 1

因为这对我来说非常有趣，因为我知道将来我可能需要这样的东西，我做了比平常更多的研究，我很高兴，因为我找到了完美的解决方案。

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

此插件不仅允许您旋转，还可以自由变换元素，希望您觉得它有用。

Answer 2

查看CSS3转换属性，尤其是rotate功能。

According to caniuse以下浏览器支持CSS3 2d变换的旋转功能：

IE＆gt; 9
FF＆gt; 3
Chrome＆gt; 4
Opera＆gt; 10
iOS Safari＆gt; 3
Android浏览器＆gt; 2.1
BB浏览器＆gt; 7
Opera Mobile＆gt; 11
Chrome（适用于Android）
Firefox（适用于Android）

iwanttouse.com聚合该数据并说87.44% of all users can use it。

不确定您对浏览器支持的要求是什么，但如果您想在IE＆lt; 9中执行轮换，请查看css rotate property in IE。您需要查看useragentman's transforms translator for IE。

Answer 3

OK Sven，我已经检查了您放置的网站，他们使用了一个名为ExtJS的库（这是HTML5就绪，因此与所有现代浏览器兼容），它具有旋转任何元素的功能Ext.draw.Draw-method-rotate

现在，您说过呈现给您的解决方案与所有浏览器不兼容，好吧，然后结合解决方案，在您发布的链接中提供可以组合的解决方案，使其与所有浏览器兼容（似乎大多数解决方案使用CSS，所以你应该在那里安全）所有你需要做的就是努力像@Jay Blanchard建议并开始制作一些代码。

最后，我的另一个解决方案（如果你不能将ExtJS库包含到你的项目中）是使用名为raphaeljs的Javascript库。 Element.transform([tstr])

在我看来，你可以做的是将一个手柄图像附加到div，得到手柄的位置（x，y）并传递元素需要旋转的程度。

就代码而言，我目前没有任何东西，但如果我有机会，我会在接下来的几个小时左右拿出一些东西

Answer 4

为什么不使用jQuery UI Rotation插件：请访问 - ＆gt; http://vremenno.net/js/jquery-ui-rotation-using-css-transform/ 你可以下载插件点击这个 - ＆gt; http://vremenno.net/examples/jquery-ui-rotation/jquery.ui.rotation.zip

在每个浏览器中使div可旋转

4 个答案: