原生js实现拖拽

HTML5中有专门的拖拽功能，但是对于原生的js还是比较好奇，就封装了一下

var disX=0,disY=0,dragele,boldown;
//按下鼠标和抬起鼠标时间
var downTime,upTime;
var drag=document.getElementsByClassName('wapper')[0];

funcdrag(drag);

//封装方法
function funcdrag(ele){
dragele=ele;
//鼠标按下
ele.addEventListener('mousedown',function(e){
e=e||window.event
downTime=new Date().getTime();
//相对位置 鼠标和目标左上角
disX=e.pageX-parseInt(ele.style.left);
disY=e.pageY-parseInt(ele.style.top);
//设置按下标识
boldown=true;

},false)

document.addEventListener('mousemove',move,false);

//鼠标抬起 取消拖拽功能
document.addEventListener('mouseup',function(){
upTime=new Date().getTime();
ele.removeEventListener('mousemove',move,false);
boldown=false;
},false);
document.addEventListener('click',function(){
if(upTime-downTime<200)
//小于200毫秒算是点击，反之则认为是拖拽
console.log('click');
},false)

}

function move(ev){
ev=ev||window.event
//在按下后拖拽才起作用
if(boldown){
dragele.style.left=ev.pageX-disX+'px';
dragele.style.top=ev.pageY-disY+'px';
}

}

点击间隔小于0.2秒认为是点击，反之则认为是拖拽，如果硬要区分点击和拖拽则可以用坐标区分

错误点：计算disX的时候，忘记parseInt，修改left的时候忘记加'px'