使用 jQuery UI 拖动旋转和绝对定位的 div答案

【问题标题】：Dragging a rotated and absolute positioned div with jQuery UI使用 jQuery UI 拖动旋转和绝对定位的 div
【发布时间】：2013-09-17 10:52:47
【问题描述】：

当我尝试使用可拖动的 jQuery UI 拖动绝对定位和旋转的 div（使用 css3 transform: rotate(45deg)）时，jQuery 似乎不知道旋转 div 的新原点在哪里。因此，当您开始拖动时，div 会立即移动几个像素。

这是一个 jsFiddle，你可以自己看看：http://jsfiddle.net/k7g7R/4/ （通过单击旋转 div 然后拖动它）。

请注意，当可拖动的 div 处于相对位置时，它可以正常工作。

有谁知道发生了什么，我该如何解决这个问题？

【问题讨论】：

【解决方案1】：

可能与 css3 转换后错误的 jQuery offset() 有关： http://bugs.jqueryui.com/ticket/6844

我解决这个问题的方法是在您正在旋转的对象周围放置一个包装器，并使该包装器可拖动。

<div id="container">
    <div id="wrap">
        <div id="object" style="left: 90px; top: 90px;">Click to rotate, and drag</div>
    </div>
</div>

查看您更新的小提琴： http://jsfiddle.net/k7g7R/128/ （更新链接，因为缺少 jQueryRotate）

【讨论】：