无法使用鼠标拖动jcrop选择区域

Question

我遇到了一个奇怪的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(); 确保它不是其他功能引起的冲突。

非常感谢您的任何建议。提前致谢！

Lars

- Lars

---

你能提供一个实时链接或 http://jsfiddle.net（或 http://jsbin.com :)，以重现这个问题吗？ - Matt Ball

嗨，马特，我现在无法提供给你一个链接（正在本地服务器上工作），但也许我可以尝试jsbin.com - 我得研究一下。在那之前，欢迎任何评论 :) - Lars

我刚在jsbin.com上为您准备了一个示例，令我惊讶的是，我无法在这里重现错误：选择项像演示文稿一样完全可移动。所以现在我只需要弄清楚我的本地设置中是什么导致了冲突。它可能是任何东西。你有什么建议吗？我真的不知道该寻找什么.. - Lars

事实证明，我的CSS中确实有一个类似于这篇文章https://dev59.com/OU_Ta4cB1Zd3GeqPBHgZ所描述的position:relative，因此删除它解决了问题 :) - Lars

@Lars，你把position:relative fixed在哪里了？我也遇到了同样的问题，但是找不到需要定位为absolute的元素。 - brafales

Answer 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 为绝对定位，这对我解决了此问题。相对定位和 z-index 似乎是造成问题的原因。

我所做的脚本更改如下：

第 350 行 jquery.Jcrop.js：

$hdl_holder = $('<div />').width('100%').height('100%').css('zIndex', 320), 

Changed to:

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

第1122行，jquery.Jcrop.js文件中的代码：

$img_holder.append($track);

"Changed to:" (改为：)

$hdl_holder.append($track);

- Russell Shingleton

Answer 2

事实证明，我的CSS中确实有一个类似于这篇文章描述的position:relative。

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

所以移除它解决了这个问题 :)

- Paul Sweatte