jQuery Jcrop setSelect 直观显示，但是点击移动时，会跳转

Posted 2023-05-09

【中文标题】jQuery Jcrop setSelect 直观显示，但是点击移动时，会跳转

【英文标题】：jQuery Jcrop setSelect shows visually, but when clicked to move, it jumps

【发布时间】：2011-10-04 15:57:27

【问题描述】：

我正在使用 jQuery 插件 Jcrop。我对名为 setSelect 的初始设置之一有疑问。

该属性接受具有两组 x 和 y 坐标（左上角和右下角）的数组。

<img src="blah" id="cropTool" />
<script type="text/javascript">
    $(function()
    
        $('#cropTool').Jcrop(
        
            setSelect: [
                $('#cropTool').width()/4,
                $('#cropTool').height()/4,
                ($('#cropTool').width()/4)*3,
                ($('#cropTool').height()/4)*3
            ]
        );
    );
</script>

从视觉上看，这完全符合我的预期。它放置一个裁剪选择，左上角 1/4 进入图像（x 和 y），右下角 1/4 从图像右下角进入图像。像这样：

http://www.codetunnel.com/content/images/VisuallyFine.jpg

但是当我去移动它时，它会跳到这个位置：

http://www.codetunnel.com/content/images/Jumps.jpg

它立即跳到那里，我没有把它拖到那里。如果我尝试拖动默认选择，它会在移动一个像素或更多像素后跳转。在它跳跃后，我可以正常移动它。这是一个小问题，但很烦人。

有什么想法吗？

【参考方案1】：

原来我使用的另一个 jQuery 插件干扰了 jcrop 定位。一个名为 colorbox 的插件可以加载覆盖弹出窗口是问题所在。在调用 jcrop 之前，我正在调用 jQuery.colorbox.resize()。当 jcrop 代码运行时，调整大小从未完全完成。一种解决方案是将 jcrop 代码放入 setTimeout() 以延迟代码一秒钟。那是骇人听闻的解决方案，所以我问了另一个更具体的问题并得到了答案。结果发现另一个颜色框的分支包含一个修复，在调整大小方法上包含一个函数回调，以便您可以在调整大小完成时执行代码。

jQuery colorbox plugin resize callback

【参考方案2】：

不确定这是否完全正确，您只是从源中复制/粘贴，但这里有一个错字：

$('#ropTool').height()/4,

您可能正在寻找 $('#cropTool').height()/4,

【讨论】：

是的，抱歉，那是一个仅问题的错字。不过还是谢谢你。我更正了。