Cómo crear una división movible debajo de otra?

[WHK]

Hola, no se si alguien tiene alguna idea de cómo mover una división teniendo ya otra división encima con jquery.draggable().

Lo que quiero hacer es poner una imágen dentro de un cuadrado con overflow hidden y que la imágen se mueva pero también quiero poner un rectangulo encima de la imágen con transparencia, creando el efecto de que toda la imáen está oscura a exepción de un rectángulo que está al centro. Es para un editor de fotos, para que la gente pueda recortarlas.

El problema es que cuando necesito mover la fotografía de al fondo me topo con la división de encima que crea el rectangulo translúcido.

Intenté utilizar algunos plugins de recorte de imágen como el jcorp o el imagecorp pero tube algunas complicaciones con el diseño global del sitio y es necesario por obligación hacerlo de esta forma, poner la imágen de fondo en un cuadrado y moverla, redimensionarla y ajustarla hacia el rectángulo del centro.

Alguna idea para mover la imágen con $.draggable() y al mismo tiempo poner el famoso rectángulo encima?

Gracias

[Spider-Net]

z-index for the helper while being dragged.

Code examples

Initialize a draggable with the zIndex option specified.
$( ".selector" ).draggable({ zIndex: 2700 });
Get or set the zIndex option, after init.
//getter
var zIndex = $( ".selector" ).draggable( "option", "zIndex" );
//setter
$( ".selector" ).draggable( "option", "zIndex", 2700 );

Has probado poniéndole un z-index mayor a la foto que al cuadro semi-transparente? Aunque supongo que eso hará que esté por encima. La verdad es que no lo he probado. He usado el evento drag&drop de jquery pero nunca me he visto en esa situación, no hay ninguna posibilidad de usar alguno de los plugins de jquery que ya existen para hacer eso?.

Es que de otra forma lo veo complicado, porque siempre que el cuadro semi-transparente esté encima, la foto no va a poder ser arrastrada. Al menos yo no encuentro ninguna opción para eso :S

EDIT---

Una cosa de la que acabo de darme cuenta. Si lo que necesitas es recortar una imagen. La imagen debe visualizarse entera y encima el rectángulo que usaras para seleccionar la zona a cortar. Por lo tanto, para qué necesitas mover la imagen?, la imagen normalmente permanece estática y lo que se mueve es el rectángulo de selección ¿no?

[WHK]

si, el problema es que el z-index va a poner la división por encima y no me resultaría tampoco, además lo que tu dices ya lo hacen muchos otros plugins como jcorp, el problema es que forzadamente necesito hacerlo de esta manera por muchos temas. Los que utilizarán el sistema son 100% inexpertos, relación de aspecto, control de redimensionado, posiciones verticales y horizontales, etc.

Se que todo eso puede hacerse de la otra forma pero es muchisma mas carga en memoria duplicar las imágenes redimensionadas, mostrar el gif, mostrar los corners y no se ajusta al diseño del sitio WEB, me resulta mas fácil y mas bonito hacerlo de esta otra forma.

Igual ya lo solucioné, gracias de todas formas, lo que hize fue poner dos rectangulos como margen, de todas formas debe tomarse la fotografía desde el centro para poder mover y no de los costados recortados, igual quedó bién.

Gracias de todas formas.

[Spider-Net]

Me alegra que pudieras resolver finalmente tu problema, sea como fuere