<script src="funzioni.js"></script> <script> var nomi=new Array("uno","immagine"); var offsetX; var offsetY; var startX; var startY; var dragElement; var inizializza=function(){ document.onmousedown=onMouseDown; document.onmouseup=onMouseUp; } var onMouseDown=function(e){ for(n=0;n<nomi.length;n++) if(e.target.id==nomi[n]){ 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>Funziona... Questo mi permetterebbe di porre il tutto sotto un'unica funzione e chiamarla con una serie variabile di parametri...
Ci provo...
<script src="funzioni.js"></script>
<script>
function DragDrop(){
var nomi=new Array();
var offsetX;
var offsetY;
var startX;
var startY;
var dragElement;
for(n=0;n<arguments.length;n++)
nomi[n]=arguments[n];
var inizializza=function(){
document.onmousedown=onMouseDown;
document.onmouseup=onMouseUp;
}
var onMouseDown=function(e){
for(n=0;n<nomi.length;n++)
if(e.target.id==nomi[n]){
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();
}
DragDrop("due","immagine");
</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>
Bene!!!Questo mi potrebbe permettere di "archiviare" questa funzione DragDrop, da richiamare con i nomi degli elementi "dragabili" per parametri...
La inserisco nella mia "libreria" funzioni.js e vediamo se funziona.
Funziona!
Ecco come si presenta il programma adesso con la funzione archiviata:
<script src="funzioni.js"></script>
<script>
DragDrop("uno","immagine");
</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>
Nessun commento:
Posta un commento