js_layout 및 레이어의 가장 간단한 드래그 앤 드롭 효과 구현 코드

function getStyle(o,key){return o.currentStyle? o.currentStyle[key] : document.defaultView.getComputeStyle (o,null)[key ]}//ie5.0 전용 'currentStyle'

bar.onmousedown = function(e){
e = e?e :window.event; //'이벤트' 지역 변수, ff 전역 변수
params.isDrag =
params._X = e.clientX;
};

function getStyle(o,key){return o.currentStyle ? o.currentStyle[key] : document.defaultView.getCompulatedStyle(o,null)[key]}//ie5.0에만 'currentStyle'

var drag = function(bar, target){
var params = {
startLeft:0,
startTop:0,
_X:0,
_Y:0,
isDrag:false
}
if(getStyle) (target,'left') != 'auto'){params.startLeft = getStyle(target,'left')}
if(getStyle(target,'top') != 'auto'){params.startTop = getStyle(target,'top')}
bar.onmousedown = function(e){
e = e ?e:window.event; //'event' 지역 변수, 즉 ff params.isDrag = true;
params._X = e.clientX; params._Y = e.clientY;
}
document.onmouseup = function(){
params.isDrag = false;
if(getStyle(target,'left') != 'auto'){params.startLeft = getStyle( target,'left')}
if(getStyle(target,'top') != 'auto'){params.startTop = getStyle(target,'top')}
}
document.onmousemove = function(e){
var e = e?e:window.event; 🎜>if(params.isDrag){
var curX = e.clientX, curY = e.clientY, desL = curX -params._X parseInt(params.startLeft), desT = curY-params._Y parseInt(params. startTop);
target.style['left'] = desL>=0?desL 'px':0;
target.style['top'] = desT>=0?desT 'px':0 ;
}
}
};


글은 여기까지입니다. 유사한 iGoogle 드래그 앤 드롭 고급 글에 관해서는 다음에 계속하겠습니다. 드래그 앤 드롭이 결합된 포괄적인 팝업 레이어의 예입니다.