无法在jcrop中拖动选定内容,有什么可能会破坏它?

问题解决:

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

这个 position: relative; 正超越了JCROP对绝对定位的需求。一旦移除,它就工作得很好。我需要它来做其他的东西,但我只是在更精确的基础上应用它。

但我花了很长时间才找到它,不得不把我的javascript和css都放到它们的一个演示文件中,并检查每一个片段是否有冲突。屁股疼。

如果遇到类似的问题,请检查是否存在类似的定位冲突。

这可能发生的另一个原因是,如果忘记包含CSS。

我在一个项目中遇到了这个问题,在这个项目中,有人声明了CSS中所有div的相对位置。不幸的是,要修复它需要做的工作太多了,所以我必须稍微深入地研究代码以找到修复方法。

对于最新的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是绝对位置,它为我解决了这个问题。一些相对定位和zindexing的东西正在为我扼杀它。

我对脚本所做的两个更改是:

第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'
}),

第1122行jquery.jcrop.js:

$img_holder.append($track);

改为:

$hdl_holder.append($track);