IE/FireFox 호환 드래그 코드_javascript 기술

기능:
1. IE6, FF, Opear와 호환됩니다(IE7은 아직 테스트할 기회가 없었습니다)
2. 부드러운 드래그
3. 움직임을 더 부드럽게 만들기(조절 가능)

Demo

/*
작성자: misshjn
홈페이지: http://www.happyshow.org
날짜: 2007-04 -30

드래그 시작
*/
function _getStyle(element,styleProp){
if (element.currentStyle){
var y = element.currentStyle[styleProp]; 🎜> }else if (window .getComputeStyle){
var y = document.defaultView.getComputeStyle(element,null).getPropertyValue(styleProp.replace(/([A-Z])/g,"-$1").toLowerCase ());
return y;
}
function _elementOnmouseDown(evt,blockID){
var obj, temp
obj=document.getElementById(blockID); 🎜> var x = evt.clientX || evt.pageX;
var y = evt.clientY || evt.pageY;
obj.startX=x-obj.offsetLeft; .createElement("div");
d.style.position = "absolute";
d.style.width = obj.clientWidth parseInt(_getStyle(obj,"borderLeftWidth" ),10)parseInt(_getStyle( obj,"borderRightWidth")) -2 "px";
d.style.height = obj.clientHeight parseInt(_getStyle(obj,"borderTopWidth"),10) parseInt(_getStyle( obj,"borderBottomWidth")) - 2 "px";
d.style.border = "1px 점선 #666";
d.style.top = _getStyle(obj,"top")
d.style.left = _getStyle( obj,"왼쪽");
d.style.zIndex = "9999";
document.body.appendChild(d)
document.onmousemove=function(evt ){
d.style .left= (evt?evt.pageX:event.clientX) - obj.startX "px";
d.style.top= (evt?evt.pageY:event.clientY) - obj.startY "px";
};
document.onmouseup=function(){
var objL =parseInt(_getStyle(obj,"left"),10)
var objT =parseInt(_getStyle(obj,"top) "),10);
var obj2L =parseInt(d.style.left,10);
var obj2T =parseInt(d.style.top,10);

var todolist = [ ];
var level = 10; //시작점에서 끝점까지 요소 이동의 전환 수준, 0보다 큰 정수
var speed = 10, //이동 간격. 숫자가 클수록 애니메이션감이 강해지지만 점프감이 커집니다
for (i=1; i todolist.push(function(t){
setTimeout(function(){
obj.style.left = objL (obj2L-objL)*(t/level) "px";
obj .style.top = objT (obj2T-objT)* (t /level) "px";
if(t==i)todolist=null;
},speed*arguments[0]) });
        for (i=1; i            todolist[i-1](i);
        }
        document.body.removeChild(d);
        document.onmousemove = null;
        document.onmouseup = null;
    };
}

/*
    拖动结束
*/