Questo è il codice della mia funzione, che ho ribattezzato Dragabile, avente per parametri gli id degli elementi HTML che si vogliano rendere suscettibili di trascinamento.
function Dragabile(){
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;
document.onmouseover=onMouseOver;
}
var onMouseOver=function(e){
for(n=0;n<nomi.length;n++)
if(e.target.id==nomi[n]) e.target.style.cursor="pointer";
}
var onMouseDown=function(e){
for(n=0;n<nomi.length;n++)
if(e.target.id==nomi[n]){
dragElement=e.target;
offsetX=Nr(dragElement.style.left);
offsetY=Nr(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(e){
document.onmousemove=null;
for(n=0;n<nomi.length;n++)
if(e.target.id==nomi[n]){
var event=document.createEvent("Event");
event.initEvent("Dropped",true,true);
event.data=new Array(e.target,bersaglio(e));
window.dispatchEvent(event);
}
dragElement=null;
}
var bersaglio=function(e){
var oggetto;
for(n=0;n<document.getElementsByTagName('*').length;n++){
sinistra=Nr(document.getElementsByTagName('*')[n].style.left);
alto=Nr(document.getElementsByTagName('*')[n].style.top);
destra=sinistra+Nr(document.getElementsByTagName('*')[n].style.width);
basso=alto+Nr(document.getElementsByTagName('*')[n].style.height);
if(e.clientX>sinistra && e.clientX<destra && e.clientY>alto && e.clientY<basso)
if(e.target != document.getElementsByTagName('*')[n])
oggetto=document.getElementsByTagName('*')[n]
}
return oggetto;
}
inizializza();
}
Piuttosto pesante, ma non credo ci sia possibilità di fare molto di meglio, in quanto anche l'autore di uno dei testi che ho trovato via web dice che non esiste altro modo che "scandagliare" il documento alla ricerca di aree occupate da altri oggetti, come fa qui la parte del codice scritta in blu.
Questo è il codice del modulo principale:
<script src="funzioni.js"></script>
<script>
Dragabile("due");
window.addEventListener("Dropped",function(event){event.data[0].innerHTML=event.data[1].id;},false);
</script>
<body onload="inizia()">
<div id="uno" style="position:absolute;
width:300px;
height:100px;
left:200px;
top:100px;
background:#CCFFCC;
font-size:30px;
">
</div>
<div id="due" style="position:absolute;
width:300px;
height:100px;
left:500px;
top:100px;
background:#FFCCCC;
font-size:30px;
">
</div>
<img id="tre" style="width:300px;height:300px;position:absolute;left:0px;top:10px;" src="pallone.gif" />
</body>
Ecco, la parte scritta in rosso è quella che riceve l'evento una volta che l'elemento trascinabile è stato "droppato", e lo gestisce come meglio le pare a seconda della volontà del programmatore. Credo che per essere un neofita non avrei potuto fare di meglio...
