无法用鼠标拖动 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桌面 鼠标一拖后变成了这样 且点开新页面显示在下端 无法拖动
C# VS2010 进行WinForm程序开发,在设计时期,控件无法用鼠标拖动,只能用键盘调整位置。