Objet déplaçable

Voici un exemple d’utilisation de la classe GDraggableObject.

Pour déplacer la carte, utiliser la “poignée” représentée par le bloc rose.

Ici, la carte est rendue déplaçable dans un élément du DOM servant de zone de délimitation représenté par le bloc bordé de tirets.

Pour définir cette zone, la propriété container de la classe GDraggableObjectptions a été utilisée.

CODE

PARTIE CSS

<style type="text/css">
   #alldrag{position: relative;border: 1px solid;  margin: 0;
             width: 400px; height: 320px; overflow: hidden;}
   #content{position:  relative; width: 600px; height: 500px; border: 1px dashed;}
   #poignee{cursor: move; width: 400px; height: 20px; background: pink;}
   #poignee h4{margin: 0 0 0 10px; float: left;}
   #poignee h5{margin: 0 10px 0 0; float: right; cursor: pointer;}
</style>

PARTIE HTML

<div id="content">
   <div id="alldrag">
      <div id="poignee">
         <h4>Déplacer la carte à l'aide de la souris</h4>
         <h5>
            <span id="close" style="display:;" onclick="hideMap();">fermer</span>
            <span id="open" style="display: none;" onclick="showMap();">ouvrir</span>
         </h5>
      </div>
      <div id="map" ></div>
   </div>
</div>

PARTIE JAVASCRIPT

<script type="text/javascript">

   var map = new GMap2(document.getElementById('map'),
			{mapTypes: [G_HYBRID_MAP], size: new GSize(400,300)});
   /* Ici, nous déclarons l'élément html ayant pour id "map" comme conteneur de la map
   avec une taille de 400 * 300 pixel */

   map.setCenter(new GLatLng(48.8566667, 2.3509871), 7);

   var objetDrag = new GDraggableObject(document.getElementById('alldrag'),
				{container: document.getElementById('content')});

</script>

Laisser une réponse

Security Code: