拖拽实例 对于设置监听setInterval 的理解

理解情况：

　　如不利用setInterval 监听，把赋值在document.onmousemove函数中（moveElement.style.left = ..., moveElement.style.top = ...)，任何的mousemove都会对渲染产生影响。

　　利用setInterval （fnmove，10）,把赋值在fnmove中，减少渲染次数，但是间隔数值要少（在不迟钝的情况，尽可能大）。

 

code如下：

instace.dragElement.addEventListener('mousedown',function(e){

　　var e = e || window.event;

　　instace.mouseOffsetLeft = e.pageX - instace.moveElement.offsetLeft ;
　　instace.mouseOffsetTop = e.pageY - instace.moveElement.offsetTop ;
　　onMoveId = setInterval(fnMove,10);

}

// 在页面中侦听 鼠标弹起事件
document.onmouseup = function(e){
　　clearInterval(onMoveStartId);
}

document.onmousemove = function( e ){
　　if(onMoveStartId){ //判断，只为处理鼠标点击，拖拽的情况
　　　　var e = window.event || e;
　　　　mousePos.x = e.clientX;
　　　　mousePos.y = e.clientY;

　　　　e.stopPropagation && e.stopPropagation();
　　　　e.cancelBubble = true;
　　　　e = this.originalEvent;
　　　　e && ( e.preventDefault ? e.preventDefault() : e.returnValue = false );

　　　　document.body.style.MozUserSelect = 'none';
　　}
}

function fnMove(){

　　if (instace) {
　　　　var maxX = document.documentElement.clientWidth - instace.moveElement.offsetWidth;
　　　　var maxY = document.documentElement.clientHeight - instace.moveElement.offsetHeight ;

　　　　instace.moveElement.style.left = Math.min( Math.max( ( mousePos.x - instace.mouseOffsetLeft) , 0 ) , maxX) + "px"; //记住判断边界的方式
　　　　instace.moveElement.style.top = Math.min( Math.max( ( mousePos.y - instace.mouseOffsetTop ) , 0 ) , maxY) + "px"; //记住判断边界的方式

　　}

}