<script>
var $=function(id){return document.getElementById(id)}
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){
var nomi=new Array();
for(n=1;n<arguments.length;n++)
nomi[n]=arguments[n];
for(n=1;n<nomi.length;n++){
sinistra=Nr(document.getElementById(nomi[n]).style.left);
alto=Nr(document.getElementById(nomi[n]).style.top);
destra=sinistra+Nr(document.getElementById(nomi[n]).style.width);
basso=alto+Nr(document.getElementById(nomi[n]).style.height);
if(e.clientX>sinistra && e.clientX<destra && e.clientY>alto && e.clientY<basso)
e.target.innerHTML=nomi[n];
}
}
function dropped(e){
Belongs(e,"due","tre","quattro");
}
</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"></div>
<div id="quattro" style="position:absolute;width:400px;height:200px;left:700px;top:500px;background:yellow"></div>
</body>
Non sono ancora molto soddisfatto...
sabato 28 gennaio 2012
Perfezionando il dragdrop personalizzato...
Ecco, cerco di rendere flessibile il mio codice per riconoscere la destinazione del drag-drop.
Iscriviti a:
Commenti sul post (Atom)
Nessun commento:
Posta un commento