Ciao,
Avrei necessità di creare un popup/div draggabile come in questa pagina al click sulla mappa http://www.booking.com/hotel/it/gran...5ab9d7a1bc8281 avete un link tutorial ho trovato qualcosa su questo sito però non mi funziona ...
Ciao,
Avrei necessità di creare un popup/div draggabile come in questa pagina al click sulla mappa http://www.booking.com/hotel/it/gran...5ab9d7a1bc8281 avete un link tutorial ho trovato qualcosa su questo sito però non mi funziona ...
questo è il codice che ho con ie nessun problema con firefox non funziona lo spostamento..:
Codice PHP:<style type="text/css">
#M
{
position: Relative;
background-color: #EEEEEE;
font: Normal 10px Verdana;
width: 100px;
height: 50px;
padding: 5px;
border: Solid 1px #CCCCCC;
cursor: Move;
}
</style>
</head>
<body>
<script type="text/javascript">
var Giu = true;
var L, T, X, Y;
function Coordinate()
{
if (event.srcElement.id == "M")
{
Giu = true;
document.onmousemove = Muovi;
L = document.getElementById("M").style.pixelLeft;
T = document.getElementById("M").style.pixelTop;
X = event.clientX;
Y = event.clientY;
}
}
function Muovi()
{
if (Giu)
{
document.getElementById("M").style.pixelLeft = L + event.clientX - X;
document.getElementById("M").style.pixelTop = T + event.clientY - Y;
}
}
function Su() { Giu = false; }
document.onmousedown = Coordinate;
document.onmouseup = Su;
function hideMenu(id)
{
if (document.all) {
if ( document.all[id].style.visibility=="visible") document.all[id].style.visibility="hidden";
else document.all[id].style.visibility="visible";
/*cambio la visibilità da visibile a invisibile con IE*/
}
else if (document.layers){ //NN4
if (document.layers[id].visibility=="show") document.layers[id].visibility="hide";
else document.layers[id].visibility="show";
}
else if (document.getElementById) { //NN6 ed Opera
if (document.getElementById(id).style.visibility=="visible") document.getElementById(id).style.visibility="hidden";
else document.getElementById(id).style.visibility="visible";
}
}
</script>
[url="#"]MENU[/url]
<div id="M" style="visibility:hidden;">MUOVIMI [url="#"]Chiudi Finestra[/url]</div>
</body>
</html>
Alcune note librerie hanno un supporto alle funzionalità di drag'n drop
Mootools 1.2 ad esempio ha le classi drag e drag.move (anche se, per quanto ho potuto vedere, la prima non funziona correttamente su IE6)
Vuoi aiutare la riforestazione responsabile?
Iscriviti a Ecologi e inizia a rimuovere la tua impronta ecologica (30 alberi extra usando il referral)
qualche altro consiglio per la compatibilità con firefox relativo a questo codice:
Codice PHP:var Giu = true;
var L, T, X, Y;
function Coordinate()
{
if (event.srcElement.id == "M")
{
Giu = true;
document.onmousemove = Muovi;
L = document.getElementById("M").style.pixelLeft;
T = document.getElementById("M").style.pixelTop;
X = event.clientX;
Y = event.clientY;
}
}
function Muovi()
{
if (Giu)
{
document.getElementById("M").style.pixelLeft = L + event.clientX - X;
document.getElementById("M").style.pixelTop = T + event.clientY - Y;
}
}
function Su() { Giu = false; }
document.onmousedown = Coordinate;
document.onmouseup = Su;
Risolto per chi fosse interessato guardate qui:
http://www.brainjar.com/dhtml/drag/
funziona sia con ie che con firefox...
Solo a me quando premo sul div draggabile me lo sposta all'angolo in alto a sinistra dello schermo e poi da li me lo fa draggare dove voglio?:S
Se hai qualche possibilità d'essere aiutato è mettendo un link alla pagina pubblica, cosi da vedere lo script in funzione.
Cavicchi Andrea
Problemi con javascript, jquery, ajax clicca qui
Permessi di invio
- 
Rispondi quotando