Appliquant le confinement initial d'un jQuery Draggable

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

Question

Pour une page Web de photographie, j'implémente une visionneuse d'images qui permet de sélectionner une zone d'intérêt dans une image de référence à l'échelle en faisant glisser un rectangle semi-transparent sur l'image de référence. La zone sélectionnée est continuellement "en miroir" à une deuxième visionneuse d'image, qui montre la zone avec un rapport d'agrandissement à 100%.

Ma solution utilise XHTML / CSS et JQuery et j'ai une version de base qui fonctionne déjà - mais souffre d'un problème à l'initialisation, que je ne peux pas résoudre. J'ai mis en place la zone d'intérêt en tant que div qui est rendu draggable à l'aide de jQuery UI Draggable. Pour contraindre la zone d'intérêt de l'image, j'ai utilisé le containment propriété.

Initialement, le div est cependant montré en dehors de l'image. Dès que je commence à faire glisser la zone d'intérêt div, la div Les clichés à l'intérieur de l'image et le confinement sont correctement appliqués désormais. Tous les exemples de code que j'ai trouvés, démontre le confinement avec imbriqué divs, qui ne s'applique pas à mon cas puisque à mes connaissances une image (xhml img) ne peut pas contenir d'autres éléments.

Existe-t-il un moyen de faire respecter la zone d'intérêt dragable div est déjà contenu lorsque la page Web est initialement rendue?

J'ai extrait le code minimal pour illustrer le problème de mon code, voir ci-dessous.

Je serai content de tout indice.

Bravo, chrétien

<!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>
Était-ce utile?

La solution

Il y a deux façons de faire ça. Tout d'abord, vous pouvez essayer de le faire sans balise d'image. Essayez de placer #zoom_area à l'intérieur de #image_viewer et à l'aide d'une image d'arrière-plan CSS pour inclure l'image plutôt qu'un tage d'image.

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

Voir ce premier exemple en action: http://jsfiddle.net/qutew/

Si vous devez utiliser une balise d'image, vous pouvez utiliser le code suivant:

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

L'astuce ici est de définir la position Absolute et Z-Index 10.

Voir ce deuxième exemple en action: http://jsfiddle.net/pbrgb/

Licencié sous: CC-BY-SA avec attribution
Non affilié à StackOverflow
scroll top