Con questo codice, posso "acchiappare" e muovere qualsiasi elemento sulla mia pagina:
<script src="funzioni.js"></script>
<script>
var offsetX;
var offsetY;
var startX;
var startY;
var dragElement;
var inizializza=function(){
document.onmousedown=onMouseDown;
document.onmouseup=onMouseUp;
}
var onMouseDown=function(e){
dragElement=e.target;
offsetX=ExtractNumber(dragElement.style.left);
offsetY=ExtractNumber(dragElement.style.top);
startX=e.clientX;
startY=e.clientY;
for (n=0;n<document.getElementsByTagName('*').length;n++){
document.getElementsByTagName('*')[n].style.zIndex=0;
}
dragElement.style.zIndex=1;
document.onmousemove=onMouseMove;
return false;
}
var onMouseMove=function(e){
dragElement.style.left=offsetX+e.clientX-startX;
dragElement.style.top=offsetY+e.clientY-startY;
}
var onMouseUp=function(){
document.onmousemove=null;
dragElement=null;
}
inizializza();
</script>
<body>
<div id="uno" style="background:red;width:200px;height:100px;position:relative;left:100px;top:50px"></div>
<div id="due" style="background:blue;width:200px;height:100px;position:relative;left:100px;top:150px"></div>
<img id="immagine" src="labirinto.gif" style="position:absolute;width:300px;left:500px;top:250px">
</body>
Ho imparato una cosa nuova: il codice document.getElementsByTagName('*') serve per selezionare tutti gli elementi di un documento, al posto di document.all che pare non funzioni sulle vecchie versioni di Firefox.Con questo codice posso accedere a tutti gli elementi di un documento e trascinarli dove voglio.
La funzione ExtractNumber, che ho creato io e posto in un file js chiamato "funzioni.js" serve per estrarre il numero dalla stringa che esprime le proprietà spaziali di un elemento:
//estrae il valore numerico dalle proprietà di stile
function ExtractNumber(stile){
numero=Number(stile.replace("px",""));
return numero;
}
Nessun commento:
Posta un commento