Hacer cumplir la contención inicial de un jQuery Draggable

StackOverflow https://stackoverflow.com/questions/4902738

Pregunta

Para una página web de fotografía, estoy implementando un visor de imágenes que permite seleccionar un área de interés en una imagen de referencia escalada arrastrando un rectángulo semitransparente sobre la imagen de referencia. El área seleccionada se "refleja" continuamente a un segundo visor de imágenes, que muestra el área con una relación de aumento del 100%.

Mi solución usa XHTML/CSS y JQuery y tengo una versión básica que ya está funcionando, pero sufre un problema en la inicialización, que no puedo resolver. He establecido el área de interés como un div Eso se hace arrastrable con jQuery ui draggable. Para restringir el área de interés para la imagen, he usado el containment propiedad.

Inicialmente, el DIV se muestra fuera de la imagen. Tan pronto como empiezo a arrastrar el área de interés div, la div Snaps al interior de la imagen y la contención se aplica correctamente en adelante. Todo el código de muestra que encontré demuestra contención con anidados divs, que no se aplica a mi caso ya que, hasta mí, una imagen (xhml img) no puede contener otros elementos.

¿Hay alguna manera de cómo puedo aplicar que el área de interés arrastrable div ¿Ya está contenido cuando la página web se presenta inicialmente?

He extraído al código mínimo para ilustrar el problema de mi código, ver a continuación.

Me alegraré cualquier pista.

Saludos, Christian

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <script type="text/javascript" src="js/jquery.js"></script>
    <script type="text/javascript" src="js/jquery-ui-1.8.9.custom.min.js"></script>

    <script type="text/javascript">
    $(document).ready(function() {
        $("#zoom_area").draggable( {
            containment: '#the_image'
        });
    });

    </script>

<style type="text/css">

#the_image {
    width: 640px;
    height: 427px;
}

#zoom_area {
    width: 50px;
    height: 50px;
    background-color: #bbb;
    border: 1px dashed black;
    opacity: 0.6;
}

</style>

</head>
<body>

<div id="image_viewer">
    <img id="the_image" src="img/img1.jpg" alt="reference image" />
</div>

<div id="zoom_area">
</div>

</body>
</html>
¿Fue útil?

Solución

Hay dos maneras de hacer esto. Primero, puede intentar hacerlo sin una etiqueta de imagen. Intente colocar #zoom_area dentro de #IMAGE_VIEWER, y usando una imagen de fondo CSS para incluir la imagen en lugar de una imagen.

HTML:

<div id="the_image">    
    <div id="zoom_area"></div>
</div>

CSS:

#the_image {
    width: 640px;
    height: 427px;
    background-image:url('img/img1.jpg');
}

#zoom_area {
    width: 50px;
    height: 50px;
    background-color: #bbb;
    border: 1px dashed black;
    opacity: 0.6;
}

Vea este primer ejemplo en acción: http://jsfiddle.net/qutew/

Si necesita usar una etiqueta de imagen, puede usar el siguiente código:

Html

<div id="image_viewer"> 
        <img id="the_image" src="img/img1.jpg" alt="reference image" /> 
        <div id="zoom_area"></div>
</div>

CSS:

#the_image {
    width: 640px;
    height: 427px;
}

#zoom_area {
    position: absolute;
    z-index:10;
    top:10px;
    width: 50px;
    height: 50px;
    background-color: #bbb;
    border: 1px dashed black;
    opacity: 0.6;
}

El truco aquí es establecer la posición Absolute y Z-Index 10.

Vea este segundo ejemplo en acción: http://jsfiddle.net/pbrgb/

Licenciado bajo: CC-BY-SA con atribución
No afiliado a StackOverflow
scroll top