Déplacer une balise DIV avec la souris

flo -
gilbert1995 Messages postés 414 Date d'inscription Statut Membre Dernière intervention - 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

Afficher la suite

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
Souris ordinateur - Guide
Skillkorp souris logiciel - Forum souris / Touchpad

1 réponse

Réponse 1 / 1

gilbert1995 Messages postés 414 Date d'inscription Statut Membre Dernière intervention 29

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

Le curseur de mon ordi ne bouge plus

Votre réponse

Discussions similaires