mouseup,mousedown,mousemove,弹出框拖动效果,javascript

<script type="text/javascript">
      
     var dialogInstace , onMoveStartId , mousePos = {x:0,y:0}; // 用于记录当前可拖拽的对象
      
     // var zIndex = 9000;
      
     // 获取元素对象
     function g(id){return document.getElementById(id);}
      
     // 自动居中元素（el = Element）
     function autoCenter( el ){
     var bodyW = document.documentElement.clientWidth;
     var bodyH = document.documentElement.clientHeight;
      
     var elW = el.offsetWidth;
     var elH = el.offsetHeight;
      
     el.style.left = (bodyW-elW)/2 + 'px';
     el.style.top = (bodyH-elH)/2 + 'px';
      
     }
      
     // 自动扩展元素到全部显示区域
     function fillToBody( el ){
     el.style.width = document.documentElement.clientWidth +'px';
     el.style.height = document.documentElement.clientHeight + 'px';
     }
      
     // Dialog实例化的方法
     function Dialog( dragId , moveId ){
      
     var instace = {} ;
      
     instace.dragElement = g(dragId); // 允许执行 拖拽操作 的元素
     instace.moveElement = g(moveId); // 拖拽操作时，移动的元素
      
     instace.mouseOffsetLeft = 0; // 拖拽操作时，移动元素的起始 X 点
     instace.mouseOffsetTop = 0; // 拖拽操作时，移动元素的起始 Y 点
      
     instace.dragElement.addEventListener('mousedown',function(e){
      
     var e = e || window.event;
      
     dialogInstace = instace;
     instace.mouseOffsetLeft = e.pageX - instace.moveElement.offsetLeft ;
     instace.mouseOffsetTop = e.pageY - instace.moveElement.offsetTop ;
      
     onMoveStartId = setInterval(onMoveStart,10);
     return false;
     // instace.moveElement.style.zIndex = zIndex ++;
     })
      
     return instace;
     }
      
     // 在页面中侦听 鼠标弹起事件
     document.onmouseup = function(e){
     dialogInstace = false;
     clearInterval(onMoveStartId);
     }
     document.onmousemove = function( e ){
     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 onMoveStart(){
      
      
     var instace = dialogInstace;
     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";
      
     }
      
     }
      
     // 重新调整对话框的位置和遮罩，并且展现
     function showDialog(){
     g('dialogMove').style.display = 'block';
     g('mask').style.display = 'block';
     autoCenter( g('dialogMove') );
     fillToBody( g('mask') );
     }
      
     // 关闭对话框
     function hideDialog(){
     g('dialogMove').style.display = 'none';
     g('mask').style.display = 'none';
     }
      
     // 侦听浏览器窗口大小变化
     window.onresize = showDialog;
      
     Dialog('dialogDrag','dialogMove');
     showDialog();
      
     </script>