javascript之外部旋转 div 内的内部 div 在使用 jQuery UI 拖动时不跟随鼠标

yxwkf 阅读:498 2023-11-05 18:46:41 评论:0

我在外部 div 中有一个内部 div。内部 div 可拖动,外部可旋转 40 度。这是一个测试用例。在实际情况下,它可以是任何 Angular 。还有另一个名为 point 的 div,其位置如图所示。 (我来自 flash 背景。在 Flash 中,如果我要拖动内部 div,它会跟随鼠标,即使它包含在外部旋转的 div 中。)但是在 HTML 中,内部 div 不会跟随鼠标,因为它可以看到从 fiddle 。我希望 div“点”完全跟随鼠标。这可能吗。我尝试使用三 Angular 法来计算它,但无法让它工作。

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

请您参考如下方法:

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

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

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

在拖动事件中,我转换拖动偏移以反射(reflect)新值。这是通过沿与旋转 Angular 相反的方向围绕外部 div 中心旋转偏移量来完成的。

我对其进行了测试,它似乎可以在 IE9、Firefox 和 Chrome 中运行。

您可以尝试不同的 Angular 值,它应该可以正常工作。

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

编辑:

我更新了脚本以说明包含行为以及评论中建议的级联旋转。

我还打算将 outer div 拖动到另一个 div 中。现在它几乎可以工作了。我只需要能够更新拖动的 div 的中心来修复拖动行为。

尝试拖动红色 div。

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


标签:jquery
声明

1.本站遵循行业规范,任何转载的稿件都会明确标注作者和来源;2.本站的原创文章,请转载时务必注明文章作者和来源,不尊重原创的行为我们将追究责任;3.作者投稿可能会经我们编辑修改或补充。

全民解析

全民解析

关注我们