Impossible de faire glisser la sélection jcrop avec la souris

Question

J'ai ce problème étrange avec jcrop que j'ai passé des heures à essayer de comprendre. Le problème est que je ne peux pas faire glisser/déplacer la sélection de la même manière que cela est montré dans le demo.

Si je tente d'initialiser le script avec setSelect afin que l'image apparaît avec une sélection lorsque la page se charge, que sélection est mobile, mais une fois que je fais une sélection avec la souris, cette sélection (qui remplace la première bien sûr) ne peut pas être traîné, peu importe ce que je fais. Il peut cependant être déplacé avec le clavier, mais je ne peux pas compter sur les personnes utilisant le clavier.

J'ai fait un tour de table et la seule chose qui s'est approchée était ce poste: Cannot drag selection in Jcrop, what could break it? mais cela ne résout pas le problème pour moi (et je n'ai aucun positionnement relatif que je connaisse, donc ce ne serait pas la cause de le problème en premier lieu).

J'utilise la configuration suivante en utilisant jquery et jcrop 0.9.8 1.4.2 sur un mac (ont essayé Firefox et 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 
    }); 

mais j'ai aussi essayé d'utiliser simple $('#jcrop_target').Jcrop(); pour vous assurer que ce n'était pas les autres fonctions qui causaient un conflit.

Toute contribution sera très, très appréciée. Merci d'avance !

Lars

Answer 1

Il est avéré que je fait avait une position: relative dans mon css comme décrit dans ce post:

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

si enlèverons cette résolu :)

Answer 2

J'ai couru dans le problème dans un projet où quelqu'un avait déclaré la position relative sur tous les divs dans le CSS. Malheureusement, il aurait fallu trop de travail pour le réparer, donc j'ai dû creuser un peu le code pour trouver une solution.

Avec la dernière bibliothèque jCrop (Jcrop-0.9.12 au moment de cette publication), il y a un changement mineur au script qui a résolu le problème pour moi.

Vers la ligne 1122 jquery.Jcrop.js ressemble à ceci:

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

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

En changeant la img_holder.append de $ (piste $) à hdl_holder.append $ (piste $) et de veiller à ce que le $ hdl_holder est la position absolue, il a résolu ce problème pour moi. Quelque chose avec le positionnement relatif et le zindexing était en train de le tuer pour moi.

Les deux modifications au script que je fait sont:

Ligne 350 jquery.Jcrop.js:

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

à Changé:

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

Ligne 1122 jquery.Jcrop.js:

$img_holder.append($track); 

à Changé:

$hdl_holder.append($track);