纯js操作div移动


  


     
     
  


  
  


     
  
  


  

打开DIV


  

操作说明:


  

  1.   

  2.   选中复选框(可移动、可调整大小)后,打开的DIV具有移动/调整大小的功能(此时移动/调整大小快捷键可使用);

      反之,不可移动/调整大小(此时移动/调整大小快捷键无效)
      
      

  3.   单选框默认居中打开选中,无论有无保存DIV位置和大小均以默认位置及大小打开DIV
      
      

  4.   单选框保留位置上打开选中,如果未发现保存记录以默认方式打开,否则以保存的位置及大小打开
      
      

  5.   如果选中可移动后,鼠标经过标题位置(蓝色背景)处会变成移动的图标,此时按住鼠标左键会产生一个半透明的DIV,按住鼠标不动拉动此半透明DIV会跟随移动,释放鼠标左键后会产生一段原始位置移动至半透明位置的动画,当动画重叠时,半透明的DIV将回收。
      
      

  6.   如果选中可调整大小后,鼠标经过整个DIV的最右下角处会变成伸缩的图标,此时按住鼠标左键会产生一个半透明的DIV,按住鼠标不动拉动此半透明DIV会随着移动而调整大小,释放鼠标左键后会产生一段原始大小伸缩至半透明大小的动画,当动画重叠时,半透明的DIV将回收。
      
      

  7.   DIV的右上角有关闭按钮,按下后DIV将remove
      
      

  


  快捷键说明:
  


  1.   

  2.   Ctrl + Enter : 打开div
      
      

  3.   Ctrl + s(大小写均可) : 保存div的大小和位置
      
      

  4.   上下左右箭头 : 轻移div位置
      
      

  5.   Ctrl + 上下左右箭头 : 轻调div大小
      
      

  6.   Esc : 关闭Div
      
      

  
  
发布了332 篇原创文章 · 获赞 3 · 访问量 47万+
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章