5

首先，我 在 jQuery 中看到了 Rotating a Div Element， 但它并没有给我想要的解决方案。

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

所以 1 个主 div（bord），其中 div（类睡眠）在 div 睡眠中是缩放到 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。

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

我已经使 div 可放置可调整大小和可拖动。见上面的代码。

但我不知道从哪里开始旋转，这就是我发布问题的原因。

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

例子

我做了一个测试页，如果我得到了一点评价，但效果不佳。

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

然后他们被标记为白色边框然后单击

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

有超过 600 行代码，其中大部分是 php 和 jquery，我试着做一个小提琴，但它的代码太多了。所有 jquery 都可以在源代码中查看。

4

4 回答 4

6

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

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

这个插件不仅可以让你旋转，还可以自由变换元素，希望对你有帮助。

于 2013-05-14T17:04:57.397 回答
3

看看 CSS3 转换属性，特别是rotate特性。

根据 caniuse的说法，以下浏览器支持 CSS3 2d 变换的旋转功能：

  • IE >9
  • FF >3
  • 铬 >4
  • 歌剧 >10
  • iOS Safari >3
  • 安卓浏览器>2.1
  • BB浏览器 >7
  • Opera 手机 >11
  • 铬（适用于安卓）
  • 火狐（安卓）

iwanttouse.com 汇总了这些数据，并表示87.44% 的用户可以使用它。

不确定您对浏览器支持的要求是什么，但如果您想在 IE<9 中执行旋转，请查看 IE 中的css rotate 属性。您需要查看useragentman 的 IE 转换转换器。

于 2013-05-11T01:42:52.490 回答
1

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

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

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

在我看来，您可以做的是将句柄图像附加到 div，获取句柄的位置（x，y）并传递元素需要旋转的度数。

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

于 2013-05-08T23:22:48.840 回答
0

为什么不使用 jQuery UI Rotation 插件：请访问 -> http://vremenno.net/js/jquery-ui-rotation-using-css-transform/ 并且您可以点击这里下载插件 -> http:// /vremenno.net/examples/jquery-ui-rotation/jquery.ui.rotation.zip

于 2013-05-11T06:41:06.587 回答