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

发布于 2024-11-24 07:51:25 字数 1049 浏览 0 评论 0原文

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

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

有什么想法吗?

I am using the jQuery plugin Jcrop. I have an issue with one of the initial setup settings called setSelect.

The property takes in an array with two sets of x and y coordinates (top left corner, and bottom right corner).

<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>

Visually this does exactly what I expect. It places a crop selection with the top left corner 1/4th of the way into the image (x and y) and the bottom right corner 1/4th of the way into the image from the bottom right of the image. Like this:

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

But then when I go to move it, it jumps to this position:

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

It jumps there immediately, I'm not dragging it there. If I try to drag the default selection it jumps after moving it by one pixel or more. After it jumps I can move it around normally. It's a somewhat minor issue, but it is annoying.

Any ideas?

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(2

咽泪装欢 2024-12-01 07:51:26

事实证明我使用的另一个 jQuery 插件干扰了 jcrop 定位。一个名为 colorbox 的插件加载覆盖弹出窗口是问题所在。我在调用 jcrop 之前调用了 jQuery.colorbox.resize() 。当 jcrop 代码运行时,调整大小从未完全完成。一种解决方案是将 jcrop 代码放入 setTimeout() 中以延迟代码一秒钟。这是一个黑客解决方案,所以我问了另一个更具体的问题并得到了答案。结果 colorbox 的另一个分支包含一个修复程序,在调整大小方法上包含函数回调,以便您可以在调整大小完成时执行代码。

jQuery colorbox 插件调整大小回调

Turns out another jQuery plugin I was using was interfering with the jcrop positioning. A plugin called colorbox which loads overlay popups was the issue. I was calling jQuery.colorbox.resize() right before I was calling jcrop. When the jcrop code ran the resize was never quite complete. One solution was to put the jcrop code into a setTimeout() to delay the code for a second. That was hackish solution so I asked another more specific question and got an answer. Turns out another fork of colorbox contains a fix to include a function callback on the resize method so that you can execute code when the resize is complete.

jQuery colorbox plugin resize callback

烈酒灼喉 2024-12-01 07:51:26

不确定这是否完全正确,您刚刚从源代码中进行了复制/粘贴,但这里有一个拼写错误:

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

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

Not sure if this is quite it and you just did a copy/paste from your source but there's a typo here:

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

You're probably looking for $('#cropTool').height()/4,

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文