SSISO Community

JavaScript의 Finite State Machine, Part 3: 위젯 테스트 하기 (한글) [스크립트] 지정된 영역에서 각 레이어 간의 이동 효과(구글,야후) AJAX를 이용한 현재접속자 리스트 [XML]:SAX(Simple API for XML) [Java Script/DHTML] DHTML을 이용한 Drag & Drop [Java Script/DHTML] DHTML을 이용한 Drag & Drop 업그레이드 [JS]배열로 구성된 체크박스 다루기 window.event.clientX, window.event.clientY 주목할 만한 웹 2.0 아이디어 40개 POJO로 돌아온「EJB 3.0과 자바 퍼시스턴스 API」

시소당

[Java Script/DHTML] DHTML을 이용한 Drag & Drop 업그레이드

DHTML 과 Java Script 를 이용한 Drag & Drop 의 업그레이드 버전이다.

여러개의 Table을 생성하여 최대/최소의 크기조절 기능이 업그레이드 되었다.

구글의 개인화 페이지와 비슷한 기능구현을 위해

Drag&Drop 기능,

창의 최대/최소의 기능,

창의 크기조절 기능으로 구현되어 있다.

테스트 URL : http://www.congiya.com/control/dragRelation.jsp

< 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 ="최소";
}
}

[출처] [Java Script/DHTML] DHTML을 이용한 Drag & Drop 업그레이드 |작성자 saturnfly

2818 view

4.0 stars

SSISO Community