Déplacer une balise DIV avec la souris

Fermé

flo - Modifié par flo le 15/05/2012 à 21:49
gilbert1995 Messages postés 414 Date d'inscription samedi 12 septembre 2009 Statut Membre Dernière intervention 30 mai 2013 - 16 mai 2012 à 02:11

Bonjour,

Je cherche un moyen pour rendre une balise DIV déplacable avec la souris. J'aimerai que la vue streetview du lien ci-dessous soit incorporée dans une petite fenêtre avec un boutton pour la minimiser.

J'ai trouvé le boutton Html5 mais je ne suis pas sûr que ce soit très approprié. Faut passer à JQueryUI ?

Comment faire ?

Merci pour votre aide.

https://google-developers.appspot.com/maps/documentation/javascript/examples/streetview-simple?hl=fr

A voir également:

Déplacer une balise DIV avec la souris
Déplacer une colonne excel - Guide
Quelle touche pour débloquer la souris ? - Guide
Déplacer la barre des taches windows 11 - Guide
Autoclick souris - Télécharger - Divers Utilitaires
Balise br ✓ - Forum Webmastering

1 réponse

Réponse 1 / 1

gilbert1995 Messages postés 414 Date d'inscription samedi 12 septembre 2009 Statut Membre Dernière intervention 30 mai 2013 29
16 mai 2012 à 02:11

Inspire toi :)

<html>
<head>
<script src="https://maps.googleapis.com/maps/api/js?sensor=false" type="text/javascript"></script>
<script type="text/javascript">

  function initialize() {
    var fenway = new google.maps.LatLng(42.345573,-71.098326);
    var mapOptions = {
      center: fenway,
      zoom: 14,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    };
    var map = new google.maps.Map(
        document.getElementById("map_canvas"), mapOptions);
    var panoramaOptions = {
      position: fenway,
      pov: {
        heading: 34,
        pitch: 10,
        zoom: 1
      }
    };
    var panorama = new  google.maps.StreetViewPanorama(document.getElementById("pano"),panoramaOptions);
    map.setStreetView(panorama);
  }
</script>
<style>
#map
{
border:2px solid red;
background:blue;
color:white;
width:450px;
}
</style>
<script type="text/javascript">
var bougeX;
var bougeY;
function bouger(evenement,id)
{
document.onmousemove = function(e) {bouger(e, id);}
bougeX = evenement.pageX;
bougeY = evenement.pageY;
document.getElementById(id).style.marginLeft = bougeX-10 +"px";
document.getElementById(id).style.marginTop = bougeY-10 + "px";
}

function stop_bouge(evenement,id)
{
document.onmousemove = null;
bougeX = evenement.pageX;
bougeY = evenement.pageY;
document.getElementById(id).style.marginLeft = bougeX-10 +"px";
document.getElementById(id).style.marginTop = bougeY-10 + "px";
}

</script>
</head>
<body onload="initialize()">
<div id="map" onmousedown="bouger(event,'map');" onmouseup="stop_bouge(event,'map');">
	<div id="map_canvas" style="width: 400px; height: 300px;"></div><br />
	<div id="pano" style="width: 400px; height: 300px;"></div>
</div>
</body>
</html>

Discussions similaires

la balise ou

ou ou

Balise

Faire sauter 2 lignes avec br (CSS)

balise HTML