Cannot drag jcrop selection with the mouse

I have this weird issue with jcrop that I have spent hours trying to figure out. The problem is that I cannot drag / move the selection around in the same way as it is shown in the demo.

If I try to initialize the script with setSelect so that the image appears with a selection when the page loads, that selection is movable, but once I make a selection with the mouse, this selection (that replaces the initial one of course) cannot be dragged no matter what I do. It can, however, be moved with the keyboard, but I ca开发者_运维问答nnot rely on people using the keyboard.

I have googled around and the only thing that came close was this post: Cannot drag selection in Jcrop, what could break it? but that doesn't solve the problem for me (and I have no relative positioning that I know of so it wouldn't be the cause of the problem in the first place).

I use the following setup using jquery 1.4.2 and jcrop 0.9.8 on a mac (have tried both Firefox and 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
    });

but I have also tried using a simple $('#jcrop_target').Jcrop(); to make sure that it wasn't the other functions causing a conflict.

Any input will be very, very appreciated. Thanks in advance !

Lars

It turned out that I actually did have a position:relative in my css like described in this post:

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

so removing that solved it :)

I ran into the problem in a project where someone had declared position relative on all divs in the CSS. Unfortunately it would have required too much work to fix it, so I had to dig through the code a bit to find a fix.

With the latest jCrop library (Jcrop-0.9.12 at the time of this posting) there is a minor change to the script that fixed the issue for me.

At around line 1122 in jquery.Jcrop.js looks like this:

       if (Touch.support) {
            $track.bind('touchstart.jcrop', Touch.createDragger('move'));
        }

        $img_holder.append($track);
        disableHandles();

By changing the $img_holder.append($track) to $hdl_holder.append($track) and ensuring that the $hdl_holder is position absolute, it resolved this issue for me. Something with the relative positioning and zindexing was killing it for me.

The two changes to the script I made are:

Line 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'
}),

Line 1122 jquery.Jcrop.js:

$img_holder.append($track);

Changed to:

$hdl_holder.append($track);