无法用鼠标拖动 jcrop 选择答案

【问题标题】：Cannot drag jcrop selection with the mouse无法用鼠标拖动 jcrop 选择
【发布时间】：2011-02-28 22:09:23
【问题描述】：

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

如果我尝试使用 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(); 来确保不是其他函数导致冲突。

任何意见都将非常非常感谢。提前致谢！

拉尔斯

【问题讨论】：

您能否提供重现问题的实时链接或jsfiddle.net（或jsbin.com :)？
嗨，马特，我现在无法为您提供链接（在本地服务器上工作），但也许我可以尝试 jsbin.com - 必须调查一下。在那之前，任何 cmets 都非常受欢迎:)
我只是在 jsbin.com 上为您提供了一个示例，令我惊讶的是，我无法在这里重现错误：选择完全可以移动，就像它是演示一样。所以现在我只需要弄清楚是什么导致了我的本地设置中的冲突。真的可以是任何东西。你有什么建议吗？我真的不知道要找什么..
事实证明，我实际上确实在我的 css 中有一个 position:relative 就像在这篇文章stackoverflow.com/questions/3380969/… 中描述的那样，所以删除它解决了它:)
@Lars 你在哪里有那个位置：相对固定？我遇到了同样的问题，但找不到需要定位为绝对的元素

标签： jquery jcrop

【解决方案1】：

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

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

所以删除它解决了它:)

【讨论】：

【解决方案2】：

我在一个项目中遇到了这个问题，有人在 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);

【讨论】：