|
DHTML 과 Java Script 를 이용한 Drag & Drop 의 업그레이드 버전이다.
여러개의 Table을 생성하여 최대/최소의 크기조절 기능이 업그레이드 되었다.
구글의 개인화 페이지와 비슷한 기능구현을 위해
Drag&Drop 기능,
창의 최대/최소의 기능,
창의 크기조절 기능으로 구현되어 있다.
< dragRelation.js >
// Table Resize : 창의 크기조절 기능
function resizeWin(idx, pTblT, pTblC, pDiv)
{
var tleft=parseInt(pDiv.style.left,10);
var ttop=parseInt(pDiv.style.top,10);
// ReSize
document.onmousemove=function() {
if((event.clientX-tleft) > 100 && (event.clientY-ttop) > 100 )
{
pTblT.style.width=event.clientX-tleft;
pTblC.style.width=event.clientX-tleft;
pTblC.style.height=event.clientY-ttop;
eval("divInner"+idx).innerHTML ="New Size (W:"+pTblC.style.width+", H:"+pTblC.style.height+")";
}
}
document.onmouseup=function() {
document.onmousemove=null;
}
}
// Mouse Down & Move : Drag & Drop 기능
function moveWin( idx, pDiv ){
var ox=event.offsetX;
var oy=event.offsetY;
var transwin=document.all.winTrans;
transwin.style.display="block";
transwin.style.width=pDiv.clientWidth;
transwin.style.height=pDiv.clientHeight;
transwin.style.top=event.clientY-oy;
transwin.style.left=event.clientX-ox;
document.onmousemove=function(){
transwin.style.display="block";
transwin.style.top=event.clientY-oy;
transwin.style.left=event.clientX-ox;
}
document.onmouseup=function(){
transwin.style.display="none";
document.onmousemove=null;
pDiv.style.top=parseInt(transwin.style.top,10);
pDiv.style.left=parseInt(transwin.style.left,10);
eval("divInner"+idx).innerHTML = "New Location (top:"+pDiv.style.top+", left:"+pDiv.style.left+")";
}
}
// 창의 최대/최소 기능 구현 function divShowHide(idx, pTbl, pDiv) { if("최소" == eval("tdShowHide"+idx).innerHTML) { eval("tbWinC"+idx).style.display="none"; eval("tdShowHide"+idx).innerHTML ="최대"; } else { eval("tbWinC"+idx).style.display="block"; eval("tdShowHide"+idx).innerHTML ="최소"; } } |
