E' ancora molto rudimentale, ma il bello è che è tutto mio (ovviamente con le dovute ispirazioni prese da tutorial vari in rete!
<script>
function Nr(stile){
numero=Number(stile.replace("px",""));
return numero;
}
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])
dropped(e);
dragElement=null;
}
inizializza();
}
DragDrop("uno");
function Belongs(e,nome){
sinistra=Nr(nome.style.left);
alto=Nr(nome.style.top);
destra=sinistra+Nr(nome.style.width);
basso=alto+Nr(nome.style.height);
if(e.clientX>sinistra && e.clientX<destra && e.clientY>alto && e.clientY<basso){
e.target.innerHTML=nome.id;
}
}
function dropped(e){
for(n=0;n<document.getElementsByTagName("div").length;n++)
if(document.getElementsByTagName("div")[n] != e.target)
Belongs(e,document.getElementsByTagName("div")[n]);
}
</script>
<body>
<div id="uno" style="position:absolute;width:300px;height:150px;left:100px;top:100px;border:5px solid green;font-size:30px"></div>
<div id="due" style="position:absolute;width:400px;height:400px;left:600px;top:100pz;background:red"></div>
<div id="tre" style="position:absolute;width:300px;height:200px;left:100px;top:500px;background:blue"
</body>
Nessun commento:
Posta un commento