无法用鼠标拖动 jcrop 选择

Posted

技术标签:

【中文标题】无法用鼠标拖动 jcrop 选择【英文标题】:Cannot drag jcrop selection with the mouse 【发布时间】: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 就像在这篇文章***.com/questions/3380969/… 中描述的那样,所以删除它解决了它:) @Lars 你在哪里有那个位置:相对固定?我遇到了同样的问题,但找不到需要定位为绝对的元素 【参考方案1】:

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

http://www.***.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);

【讨论】:

以上是关于无法用鼠标拖动 jcrop 选择的主要内容,如果未能解决你的问题,请参考以下文章

win7桌面 鼠标一拖后变成了这样 且点开新页面显示在下端 无法拖动

jCrop 在移动设备上无法正常工作

在Firefox中拖动鼠标时如何防止文本选择?

C# VS2010 进行WinForm程序开发,在设计时期,控件无法用鼠标拖动,只能用键盘调整位置。

未捕获的类型错误:无法读取未定义的属性“ui”。选择croparea时出现JQuery JCrop问题

无法在 ajax jquery 上为 release() 获取 jcrop 对象