La mia funzione DragDrop(), avente per parametri un numero variabile di nomi di elementi HTML, provvede egregiamente a rendere trascinabili gli elementi.
Adesso sono riuscito a far sì che l'evento di "droppaggio" dell'elemento inneschi un evento, per cui, ponendone un listener, si può intercettare con eventuali parametri (che ancora non so come inserire nell'evento).
Ecco il codice, un po' rudimentale in certi tratti, comunque l'idea è buona...
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;
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);
window.dispatchEvent(event);
}
dragElement=null;
}
inizializza();
}
Quello in rosso è il codice che crea e triggera l'evento personalizzato "Dropped".Questo è il codice presente nella mia libreria funzioni.js.
Nel modulo principale, invece, ho aggiunto il listener per questo evento:
<script src="funzioni.js"></script>
<script>
DragDrop("uno","due","tre");
window.addEventListener("Dropped",function(){alert("droppato!!!");},false);
</script>
<body onload="inizia()">
<div id="uno" style="position:absolute;
width:300px;
height:100px;
left:200px;
top:100px;
background:green;
">
</div>
<div id="due" style="position:absolute;
width:300px;
height:100px;
left:500px;
top:100px;
background:red;
">
</div>
<img id="tre" style="width:300px;position:absolute" src="pallone.gif">
</body>
...e quello in rosso è l'aggiunta dell'ascoltatore o listener.In sostanza, quando un elemento viene droppato, l'evento si scatena comunque. Sta poi all'eventuale presenza di listeners la facoltà di volerlo intercettare o meno ponendo le necessarie conseguenze.
Nessun commento:
Posta un commento