无法在Jcrop中拖动选择区域,可能会出现什么问题?

5

我很困惑。我正在使用JQuery 1.4.2和JCrop 0.98。其他所有东西都正常工作,但是我无法移动创建的选择。当我将鼠标悬停在选择上并单击时,什么也不会发生。

我已经包含了JQuery库、JCrop库和JCrop css文件。这是一个相当干净的页面,没有太多其他内容。我不知道是否意外地覆盖了自己的javascript和css,以使其破坏JCrop,因为两者都有很多。但是Firebugs没有发现任何问题。

教程在我的浏览器和服务器上都可以正常工作,尽管它们使用不同版本的jquery。然而,当我用我自己的版本替换它们最初使用的版本时,它们仍然可以正常工作。所以这一定与我的javascript或css有关。

我完全不知所措,在寻找可能存在问题的所有内容,但我甚至不知道该去哪里寻找。有其他人遇到过这个问题吗?问题出在哪里,你是如何解决的?我应该在哪里寻找错误或错误覆盖?

3个回答

14

问题已解决:

* { margin: 0; padding: 0; position: relative; }

position: relative;的设置覆盖了JCrop对于绝对定位的需求。一旦移除,它就能完美地工作了。我之前需要这个设置用于其他东西,但现在只是根据需要进行更精确的应用。

花费了我很长时间才找到问题所在,不得不将我的JavaScript和CSS放入他们的演示文件中,逐一检查每个部分的冲突。真是令人头疼。

如果您遇到类似的问题,请检查是否有类似的位置冲突。


1
你可能为我节省了数小时无用的调试时间。+1 - user1027620
1
向您致敬,先生。你节省了我下午的其余时间。 - collin

14

另一个可能导致此情况发生的原因是您忘记包含CSS。


2
原来那就是我的问题! - brafales
我也一样。现在感觉很愚蠢。 - Peon

0

在一个项目中,我遇到了一个问题,其中有人在CSS中为所有的div声明了position:relative。不幸的是,修复这个问题需要太多的工作量,所以我不得不在代码中深入挖掘一下,找到一个解决方法。

在最新的jCrop库(发布本文时的版本为Jcrop-0.9.12)中,有一个小的脚本更改可以解决我的问题。

在jquery.Jcrop.js文件的大约1122行附近,代码如下:

       if (Touch.support) {
            $track.bind('touchstart.jcrop', Touch.createDragger('move'));
        }

        $img_holder.append($track);
        disableHandles();

通过将$img_holder.append($track) 更改为 $hdl_holder.append($track),并确保$hdl_holder 是绝对定位,我解决了这个问题。与相对定位和z-index有关。
我所做的脚本两个更改是: 第350行 jquery.Jcrop.js:
$hdl_holder = $('<div />').width('100%').height('100%').css('zIndex', 320), 

改为:

$hdl_holder = $('<div />').width('100%').height('100%').css({
    zIndex: 320,
    position: 'absolute'
}),

jquery.Jcrop.js 第1122行:

$img_holder.append($track);

改为:

$hdl_holder.append($track);

$img_holder = $('<div />').width('315px').height('315px').css({ zIndex: 310, position: 'absolute', overflow: 'hidden' }), $hdl_holder = $('<div />').width('100%').height('100%').css({ zIndex: 320, position: 'absolute' }), $sel = $('<div />') .css({ position: 'relative', zIndex: 600 }).dblclick(function(){ var c = Coords.getFixed(); options.onDblClick.call(api,c); }).insertBefore($img).append($img_holder, $hdl_holder); ........... 而且,如你所说,在第1122行完成了,但是拖动器不能移动图像的所有边缘。有什么想法吗? - Google User
可能是z-index的问题。我建议在Firebug或Chrome开发者工具中尝试调整z-index值,以确定问题的来源。 - Russell Shingleton

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文,
原文链接