gpt4 book ai didi

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

转载 作者:技术小花猫 更新时间:2023-10-29 11:28:50 24 4
gpt4 key购买 nike

第一次见过 Rotating a Div Element in jQuery但它没有给我想要的解决方案。

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

所以在 divs sleep 中有 1 个主 div(bord)和 div(类 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。

在掉落之后,我希望它们可以通过处理程序旋转。

我已将 div 设置为可拖放、可调整大小和可拖动。见上面的代码。

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

我没有示例,因为我不知道从哪里开始。

example

我做了一个测试页,我得到了一些评价,但效果不佳。

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

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

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

有超过 600 行代码,其中大部分是 php 和 jquery 我试图制作一个 fiddle ,但它的代码太多了。所有 jquery 都可以在源代码中查看。

最佳答案

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

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

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

关于jquery - 使 div 在每个浏览器中都可旋转,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/16193536/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com