IE/FireFox具备兼容性的拖动代码

设计创意栏目是一个分享最好最实用的教程的社区，我们拥有最用心的各种教程，今天就给大家分享IE/FireFox具备兼容性的拖动代码的教程，热爱PS的朋友们快点看过来吧！

特点：

1、兼容 IE6、FF、Opear（IE7还没有机会测试）

2、拖动流畅

3、起点与终点之间有过渡，使移动更平滑(可调)

演示

/*

拖动开始

*/

function _getStyle(element,styleProp){

if (){

var y = [styleProp];

}else if (){

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;

var y = evt.clientY || evt.pageY;

obj.startX=x-obj.offsetLeft;

obj.startY=y-obj.offsetTop;

var d = document.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 dashed #666";

d.style.top = _getStyle(obj,"top");

d.style.left = _getStyle(obj,"left");

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=level; 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=level; i++){

todolist[i-1](i);

}

document.body.removeChild(d);

document.onmousemove = null;

document.onmouseup = null;

};

}

/*

拖动结束

*/