在使用jQuery UI拖动的情况下,外部旋转div内的内部div不会跟随鼠标

Question

我在内部div中有一个内部div.内部div是可拖动的,外部旋转40度.这是一个测试用例.在实际情况中,它可以是任何角度.还有另一个叫做点的div,它的位置如图所示.(我来自flash背景.在Flash中,如果我要拖动内部div,它将跟随鼠标,即使它包含在外部旋转div中.)但在HTML中,内部div不会跟随鼠标,因为它可以看到来自小提琴.我希望div'点'完全跟随鼠标.这可能吗.我尝试使用trignometry工作,但无法让它工作.

http://jsfiddle.net/bobbyfrancisjoseph/kB4ra/8/

Answer 1

这是我解决这个问题的方法.

http://jsfiddle.net/2X9sT/21/

我把点放在旋转的div之外.这样我就可以确定拖拽事件会产生正常的行为(不会在奇怪的方向上跳跃).我使用draggable处理程序将点附加到鼠标光标.

在拖动事件中,我转换拖动偏移以反映新值.这是通过在旋转角度的相反方向上围绕外部中心旋转偏移来完成的.

我测试了它,它似乎在IE9,Firefox和Chrome中运行.

您可以尝试不同的角度值,它应该工作正常.

我还修改了HTML,因此可以将相同的逻辑应用于页面中的多个div.

编辑:

我更新了脚本以考虑包含行为以及注释中建议的级联旋转.

我也将使outerdiv在另一个div中可拖动而过期.现在它几乎正常工作.我只需要能够更新拖动div的中心来修复拖动行为.

尝试拖动红色div.

http://jsfiddle.net/mohdali/kETcE/39/