Question

我正在使用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

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

有什么想法吗？

Answer 1

原来我使用的另一个jQuery插件干扰了jcrop的定位。一个名为colorbox的插件加载了叠加弹出窗口是个问题。我在调用jcrop之前就调用了jQuery.colorbox.resize（）。当jcrop代码运行时，resize从未完全完成。一种解决方案是将jcrop代码放入setTimeout()以将代码延迟一秒钟。这是一个hackish解决方案所以我问了另一个更具体的问题并得到了答案。原来另一个colorbox的fork包含一个修复，在resize方法中包含一个函数回调，这样你就可以在调整大小完成时执行代码。

jQuery colorbox plugin resize callback

Answer 2

不确定这是否相当，你只是从你的来源做了一个复制/粘贴，但这里有一个错字：

$（ '＃ropTool'）。高度（）/ 4，

你可能正在寻找$（'＃cropTool'）。height（）/ 4，

jQuery Jcrop setSelect可视化显示，但点击移动时会跳转

2 个答案: