Applicare il contenimento iniziale di un draggable jQuery

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

Domanda

Per una pagina web fotografica sto implementando un visualizzatore di immagini che consente di selezionare un'area di interesse in un'immagine di riferimento ridimensionata trascinando un rettangolo semi-trasparente sull'immagine di riferimento. L'area selezionata è continuamente "rispecchiata" a un secondo visualizzatore di immagini, che mostra l'area con un rapporto di ingrandimento al 100%.

La mia soluzione utilizza XHTML/CSS e jQuery e ho una versione di base che funziona già, ma soffre di un problema all'inizializzazione, che non posso risolvere. Ho creato l'area di interesse come a div Ciò è reso trascinabile usando l'interfaccia utente jQuery. Per limitare l'area di interesse all'immagine, ho usato il containment proprietà.

Inizialmente il div è tuttavia mostrato al di fuori dell'immagine. Non appena inizio a trascinare l'area di interesse div, il div Gli scatti all'interno dell'immagine e del contenimento sono correttamente applicati d'ora in poi. Tutto il codice di esempio che ho trovato, dimostra il contenimento con nidificato divs, che non si applica al mio caso da quanto ne sappia un'immagine (xhml img) non può contenere altri elementi.

C'è un modo per far valere che l'area di interesse trascinabile div è già contenuto quando la pagina web è inizialmente resa?

Ho estratto in codice minimo per illustrare il problema dal mio codice, vedi sotto.

Sarò felice per qualsiasi suggerimento.

Saluti, cristiano

<!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>
È stato utile?

Soluzione

Ci sono due modi per farlo. Innanzitutto, puoi provare a farlo senza un tag immagine. Prova a posizionare #Zoom_AREA all'interno di #IMAGE_VIEWER e utilizza un'immagine di sfondo CSS per includere l'immagine anziché una tage dell'immagine.

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

Vedi questo primo esempio in azione: http://jsfiddle.net/qutew/

Se è necessario utilizzare un tag immagine, è possibile utilizzare il seguente codice:

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

Il trucco qui è impostare la posizione assoluta e indice Z.

Vedi questo secondo esempio in azione: http://jsfiddle.net/pbrgb/

Autorizzato sotto: CC-BY-SA insieme a attribuzione
Non affiliato a StackOverflow
scroll top