javascript - imgareaselect - jQuery Jcrop setSelect muestra visualmente, pero cuando se hace clic para moverse, salta

jquery upload and crop image plugin

Question

Estoy usando el plugin JQuery Jcrop. Tengo un problema con una de las configuraciones de configuración iniciales llamada setSelect.

La propiedad toma una matriz con dos conjuntos de coordenadas xey (esquina superior izquierda e esquina inferior derecha).

<img src="blah" id="cropTool" />
<script type="text/javascript">
    $(function()
    {
        $(''#cropTool'').Jcrop(
        {
            setSelect: [
                $(''#cropTool'').width()/4,
                $(''#cropTool'').height()/4,
                ($(''#cropTool'').width()/4)*3,
                ($(''#cropTool'').height()/4)*3
            ]
        });
    });
</script>

Visualmente esto hace exactamente lo que espero. Coloca una selección de recorte con la esquina superior izquierda 1/4 del camino en la imagen (xey) y la esquina inferior derecha 1/4 del camino en la imagen desde la esquina inferior derecha de la imagen. Me gusta esto:

http://www.codetunnel.com/content/images/VisuallyFine.jpg

Pero cuando voy a moverlo, salta a esta posición:

http://www.codetunnel.com/content/images/Jumps.jpg

Salta de inmediato, no lo estoy arrastrando hasta allí. Si intento arrastrar la selección predeterminada, salta después de moverla un píxel o más. Después de que salta, puedo moverlo normalmente. Es un problema menor, pero es molesto.

¿Algunas ideas?

Answer 1

No estoy seguro de si esto es suficiente y acaba de copiar / pegar de su fuente, pero hay un error tipográfico aquí:

$ (''# ropTool''). height () / 4,

Probablemente estés buscando $ (''# cropTool''). Height () / 4,

Answer 2

Resulta que otro plugin jQuery que estaba usando estaba interfiriendo con el posicionamiento jcrop. Un plugin llamado colorbox que carga superposición de ventanas emergentes fue el problema. Estaba llamando a jQuery.colorbox.resize () justo antes de llamar a jcrop. Cuando se ejecutó el código jcrop, el cambio de tamaño nunca llegó a completarse. Una solución fue poner el código jcrop en un setTimeout() para retrasar el código por un segundo. Esa fue una solución hackosa, así que hice otra pregunta más específica y obtuve una respuesta. Resulta que otra bifurcación de colorbox contiene una solución para incluir una función de devolución de llamada en el método de cambio de tamaño para que pueda ejecutar el código cuando se completa el cambio de tamaño.

jQuery colorbox plugin resize callback