IE/FireFox互換ドラッグコード_JavaScriptスキル

特徴:
1. IE6、FF、Opera と互換性があります (IE7 はまだテストできません)
2. スムーズなドラッグ
3. 開始点と終了点の間に遷移があります。動きをよりスムーズにします (調整可能)

デモ

/*
著者: misshjn
ホームページ: http://www.happyshow.org
日付: 2007-04 -30

ドラッグ開始
*/
function _getStyle(element,styleProp){
if (element.currentStyle){
var y = element.currentStyle[styleProp]; 🎜> }else if (window .getComputedStyle){
var y = document.defaultView.getComputedStyle(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;
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"); obj,"left");
d.style.zIndex = "9999";
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 より大きい整数
varspeed = 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 /レベル) "px";
if(t==i)todolist=null;
});
for (i=1; i todolist[i-1](i);
}
document.body.removeChild(d);
document.onmousemove = null;
document.onmouseup = null;
};
}

/*
拖アニメーション结束
*/