首页 > 代码库 > mouseup,mousedown,mousemove,弹出框拖动效果,javascript

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

2024-08-10 01:42:02   216人阅读

<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 = http://www.mamicode.com/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>

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


联系
我们