jQuery Jcrop setSelect 直观显示,但是点击移动时会跳转
我正在使用 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 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论
评论(2)
事实证明我使用的另一个 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
不确定这是否完全正确,您刚刚从源代码中进行了复制/粘贴,但这里有一个拼写错误:
$('#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,