javascript之外部旋转 div 内的内部 div 在使用 jQuery UI 拖动时不跟随鼠标
我在外部 div 中有一个内部 div。内部 div 可拖动,外部可旋转 40 度。这是一个测试用例。在实际情况下,它可以是任何 Angular 。还有另一个名为 point 的 div,其位置如图所示。 (我来自 flash 背景。在 Flash 中,如果我要拖动内部 div,它会跟随鼠标,即使它包含在外部旋转的 div 中。)但是在 HTML 中,内部 div 不会跟随鼠标,因为它可以看到从 fiddle 。我希望 div“点”完全跟随鼠标。这可能吗。我尝试使用三 Angular 法来计算它,但无法让它工作。
请您参考如下方法:
这是我解决这个问题的方法。
我把点放在旋转的 div 外面。这样我就可以确信拖动事件会产生正常行为(不会向奇怪的方向跳跃)。我使用可拖动处理程序将点附加到鼠标光标。
在拖动事件中,我转换拖动偏移以反射(reflect)新值。这是通过沿与旋转 Angular 相反的方向围绕外部 div 中心旋转偏移量来完成的。
我对其进行了测试,它似乎可以在 IE9、Firefox 和 Chrome 中运行。
您可以尝试不同的 Angular 值,它应该可以正常工作。
我还修改了 HTML,以便可以将相同的逻辑应用于页面中的多个 div。
编辑:
我更新了脚本以说明包含行为以及评论中建议的级联旋转。
我还打算将 outer
div 拖动到另一个 div 中。现在它几乎可以工作了。我只需要能够更新拖动的 div 的中心来修复拖动行为。
尝试拖动红色 div。
1.本站遵循行业规范,任何转载的稿件都会明确标注作者和来源;2.本站的原创文章,请转载时务必注明文章作者和来源,不尊重原创的行为我们将追究责任;3.作者投稿可能会经我们编辑修改或补充。