3

我对 jcrop 有一个奇怪的问题，我花了几个小时试图弄清楚。问题是我无法像演示中显示的那样拖动/移动选择。

如果我尝试初始化脚本，setSelect以便在页面加载时显示图像并带有选择，则该选择是可移动的，但是一旦我用鼠标进行选择，则无法拖动该选择（当然会替换初始选择）不管我做什么。然而，它可以用键盘移动，但我不能依赖使用键盘的人。

我用谷歌搜索了一下，唯一接近的是这篇文章：Cannot drag selection in Jcrop, what could break it? 但这并不能解决我的问题（而且我没有我所知道的相对定位，所以它首先不是问题的原因）。

我在 Mac 上使用 jquery 1.4.2 和 jcrop 0.9.8 使用以下设置（已尝试过 Firefox 和 Safari）：

    function updateCoords(c) {
        $('#x').val(c.x);
        $('#y').val(c.y);
        $('#w').val(c.w);
        $('#h').val(c.h);
    };

    function checkCoords()  {
        if (parseInt($('#w').val())) return true;
        alert('Please select a crop region then press submit.');
        return false;
    };

    $('#jcrop_target').Jcrop({
            minSize: [ 620,400 ],
            maxSize: [ 620,400 ],
            onSelect: updateCoords,
            onChange: updateCoords
    });

但我也尝试使用一个简单$('#jcrop_target').Jcrop();的方法来确保它不是导致冲突的其他函数。

任何输入将非常非常感谢。提前致谢 ！

拉斯

4

2 回答 2

1

事实证明，我确实有一个 position:relative 在我的 css 中，就像这篇文章中描述的那样：

http://www.stackoverflow.com/questions/3380969/

所以删除它解决了它:)

于 2012-12-22T22:52:29.950 回答
1

我在一个项目中遇到了这个问题，有人在 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);
于 2013-05-23T15:46:12.340 回答