Cannot drag jcrop selection with mouse

Question

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

If I try to initialize the script with the help of setSelectthe image to be displayed with a choice when the page loads, the selection of which can be moved, but as soon as I make a selection with the mouse, this choice (which, of course, replaces the original) can not be pulled out, regardless of of what i am doing. It can, however, be moved using the keyboard, but I cannot rely on people using the keyboard.

I have googled around, and the only thing that was close was the message: Can't drag the selection to Jcrop, what could break it? but this does not solve the problem the problem is for me (and I do not have any relative positioning that I know of, so that would not 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 Mac (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 also tried using simple $('#jcrop_target').Jcrop();to make sure that these are not other functions that cause a conflict.

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

Lars

Answer 1

It turned out that I really had a position: relative in my CSS, as described in this post:

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

, :

Answer 2

, - div CSS. , , , .

jCrop (Jcrop-0.9.12 ) script, .

1122 jquery.Jcrop.js :

       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 .

script, , :

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);