使用jQuery UI拖动旋转且绝对定位的div

时间:2013-09-17 10:52:48

标签: jquery jquery-ui css3 jquery-ui-draggable css-transforms

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

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

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

有谁知道发生了什么,以及我如何解决这个问题?

1 个答案:

答案 0 :(得分:6)

可能与cQuery 3转换后的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而更新了链接)

相关问题