Um Blog que fala sobre o desenvolvimento de aplicações para a plataforma Java. Gostamos de falar sobre Java com SEO, GWT (Google Web Toolkit), JSF (Java Server Faces) e NOSQL Databases.
Achei esse artigo que ensina como fazer componentes que tenham um efeito drag and drop na web, muito interessante, vale a pena conferir isso, nesse novo mundo da "web 2.0" não podemos ficar para traz.
Tenho uma dúvida relacionada: Quando eu arrasto um componente para uma área util (área onde devem ficar meus componentes arrastados) eu tenho como saber qual a posição (x,y) deste componente na minha área?
Olá Daniel, tem como fazer isso sim, vc irá precisar dessas funções javascript:
function getPosition(e){ var left = 0; var top = 0; while (e.offsetParent){ left += e.offsetLeft + (e.currentStyle?(parseInt(e.currentStyle.borderLeftWidth)).NaN0():0); top += e.offsetTop + (e.currentStyle?(parseInt(e.currentStyle.borderTopWidth)).NaN0():0); e = e.offsetParent; }
left += e.offsetLeft + (e.currentStyle?(parseInt(e.currentStyle.borderLeftWidth)).NaN0():0); top += e.offsetTop + (e.currentStyle?(parseInt(e.currentStyle.borderTopWidth)).NaN0():0);
2 comentários:
Tenho uma dúvida relacionada: Quando eu arrasto um componente para uma área util (área onde devem ficar meus componentes arrastados) eu tenho como saber qual a posição (x,y) deste componente na minha área?
Olá Daniel, tem como fazer isso sim, vc irá precisar dessas funções javascript:
function getPosition(e){
var left = 0;
var top = 0;
while (e.offsetParent){
left += e.offsetLeft + (e.currentStyle?(parseInt(e.currentStyle.borderLeftWidth)).NaN0():0);
top += e.offsetTop + (e.currentStyle?(parseInt(e.currentStyle.borderTopWidth)).NaN0():0);
e = e.offsetParent;
}
left += e.offsetLeft + (e.currentStyle?(parseInt(e.currentStyle.borderLeftWidth)).NaN0():0);
top += e.offsetTop + (e.currentStyle?(parseInt(e.currentStyle.borderTopWidth)).NaN0():0);
return {x:left, y:top};
}
function mouseCoords(ev){
if(ev.pageX || ev.pageY){
return {x:ev.pageX, y:ev.pageY};
}
return {
x:ev.clientX + document.body.scrollLeft - document.body.clientLeft,
y:ev.clientY + document.body.scrollTop - document.body.clientTop
};
}
function getMouseOffset(target, ev){
ev = ev || window.event;
var docPos = getPosition(target);
var mousePos = mouseCoords(ev);
document.getElementById('x').value = mousePos.x - docPos.x;
document.getElementById('y').value = mousePos.y - docPos.y;
//return {x:mousePos.x - docPos.x, y:mousePos.y - docPos.y};
}
me passe o seu e-mail que eu lhe mando um exemplo bem simples de utilização...
Até mais
Postar um comentário