JavaScript实现登录框拖拽

最新推荐文章于 2022-02-18 22:33:20 发布

暖思行

最新推荐文章于 2022-02-18 22:33:20 发布

阅读量402

点赞数

本文链接：https://blog.csdn.net/atszu/article/details/79097762

版权

 
  <!DOCTYPE html 
  > 
 
  < 
  html 
  lang= 
  "en" 
  > 
 
  < 
  head 
  > 
 
  < 
  meta 
  charset= 
  "UTF-8" 
  > 
 
  < 
  meta 
  name= 
  "viewport" 
  content= 
  "width=device-width, initial-scale=1.0" 
  > 
 
  < 
  meta 
  http-equiv= 
  "X-UA-Compatible" 
  content= 
  "ie=edge" 
  > 
 
  < 
  title 
  >拖拽 
  </ 
  title 
  > 
 
  < 
  style 
  > 
 
  *{ 
  margin: 
  0; 
  padding: 
  0;} 
 
  body,textarea,select,input,button{ 
 
  font-size: 
  12px; 
 
  color:white; 
 
  font-family: Arial, Helvetica, sans-serif; 
 
  -webkit-text-size-adjust: none; 
  /* 文本大小根据设备尺寸进行调整 auto，none不调整 */ 
 
   } 
 
  .fl-l{ 
  float: left;} 
 
  .fl-r{ 
  float: right;} 
 
  .clearfix:after{ 
 
  visibility: hidden; 
 
  display: block; 
 
  font-size: 
  0; 
 
  content: 
  ''; 
 
  clear:both; 
 
  height: 
  0;} 
 
  /* .clearfix{ *zoom：1;} */ 
 
  #dialog{ 
 
  height: 
  200px; 
 
  width: 
  400px; 
 
  background-color: #EAF6DB; 
 
  border: 
  1px solid lightslategray; 
 
  position:absolute; 
 
  top: 
  200px; 
 
  left: 
  400px; 
 
   } 
 
  .dialog-title{ 
 
  height: 
  40px; 
 
  line-height: 
  40px; 
 
  background-color: #3a3333; 
 
  cursor: move; 
 
   } 
 
  .login,.close{ 
 
  display: inline-block; 
 
  margin: 
  0 
  15px; 
 
   } 
 
  < 
  / 
  style 
  > 
 
  </ 
  head 
  > 
 
  < 
  body 
  > 
 
  < 
  div 
  id= 
  "dialog" 
  > 
 
  < 
  div 
  id= 
  "dialog-title" 
  class= 
  "dialog-title clearfix" 
  > 
 
  < 
  span 
  class= 
  "fl-l login" 
  >登录 
  </ 
  span 
  > 
 
  < 
  span 
  class= 
  "fl-r close" 
  >X 
  </ 
  span 
  > 
 
  </ 
  div 
  > 
 
  </ 
  div 
  > 
 
  < 
  script 
  > 
 
   window.οnlοad= 
  function(){ 
 
  //允许点击鼠标获取拖拽事件区域 
 
  var oDialog_title=document.getElementById( 
  "dialog-title"); 
 
  //登录窗口 
 
  var oDialog=oDialog_title.parentNode; 
 
  //初始化鼠标默认位置 
 
  var iDisX= 
  0; 
 
  var iDisY= 
  0; 
 
  //为获取到的DOM元素添加鼠标按下事件 onmousedown 
 
   oDialog_title.οnmοusedοwn= 
  function(e){ 
 
  //保存鼠标事件对象 
 
  var oEvent=e||event; 
 
  //计算鼠标位于弹出框内的位置 
 
   iDisX=oEvent.clientX-oDialog.offsetLeft; 
  //鼠标X轴位置-弹出框X外左边框 
 
   IDisY=oEvent.clientY-oDialog.offsetTop; 
  //鼠标Y轴位置-弹出框Y外上边框 
 
   console.log(iDisX,iDisY); 
 
  //点击弹出框后拖动鼠标，移动弹出框 
 
   document.οnmοusemοve= 
  function(e){ 
 
  var oEvent=e||event; 
 
  // oDialog.style.left=oEvent.clientX-iDisX+"px"; 
 
  // oDialog.style.top=oEvent.clientY-iDisY+"px"; 
 
  //优化，禁止登录窗口拖拽出文档可视区域，保存登录窗口在文档中的具体位置 
 
  var iCurrentDialogDisLift=oEvent.clientX-iDisX; 
  //登录窗口当前X具体值 
 
  var iCurrentDialogDisTop=oEvent.clientY-iDisY; 
 
  //检测当前登录窗口X轴是否位于文档可视区域内 
 
  if(iCurrentDialogDisLift< 
  0){ 
 
   iCurrentDialogDisLift= 
  0; 
 
   } 
  else 
  if(iCurrentDialogDisLift>document.documentElement.clientWidth-oDialog.offsetWidth){ 
 
  //当前文档X轴可视区域大小包括左右框线宽度-登录窗口X轴区域内大小包括左右框线宽度 
 
   iCurrentDialogDisLift=document.documentElement.clientWidth-oDialog.offsetWidth; 
 
   } 
 
  //检测当前登录窗口Y轴是否位于文档可视区域内 
 
  if(iCurrentDialogDisTop< 
  0){ 
 
   iCurrentDialogDisTop= 
  0; 
 
   } 
  else 
  if(iCurrentDialogDisTop>document.documentElement.clientHeight-oDialog.offsetHeight){ 
 
   iCurrentDialogDisTop=document.documentElement.clientHeight-oDialog.offsetHeight; 
 
   } 
 
   oDialog.style.left=iCurrentDialogDisLift+ 
  "px"; 
 
   oDialog.style.top=iCurrentDialogDisTop+ 
  "px"; 
 
   }; 
 
  //当点击鼠标拖动弹出框，抬起鼠标时 
 
   document.οnmοuseup= 
  function(){ 
 
  //清除弹出框的移动事件及本身 
 
   document.οnmοusemοve= 
  null; 
 
   document.οnmοuseup= 
  null; 
 
   } 
 
  //阻止默认事件，如果不加这个阻止默认事件，在firefox下会有一个获取焦点的光标一直在闪动，在3.0及以下会出现拖动重影的情况 
 
  return 
  false; 
 
   } 
 
   } 
 
  < 
  / 
  script 
  > 
 
  </ 
  body 
  > 
 
  </ 
  html 
  >

暖思行

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
JavaScript实现登录框拖拽

DOCTYPE html>html lang="en">head> meta charset="UTF-8"> meta name="viewport" content="width=device-width, initial-scale=1.0"> meta http-equiv="X-UA-Compatible" content="ie=edge"> title>拖拽t
复制链接

扫一扫