zoukankan      html  css  js  c++  java
  • 实现浏览器兼容的漂浮窗体拖动/改变尺寸的技术要点

    应用场景
      用一个 div 套一个 iframe 实现的漂浮窗口,要实现拖动标题栏自由移动,拖动边缘改变尺寸的功能。

    要实现流畅的拖动效果,其要点总结如下

    1. 处理这些事件:mousemove, mousedown, mouseup.
    2. 同时处理当前窗口和父窗口 document 的鼠标移动事件,防止移动出子窗体边界时,造成“假死”的现象。
    3. 当前窗体和父窗体中,都包含一个 div 满屏显示,平时隐藏,鼠标移动时显示(透明覆盖),用于屏蔽鼠标晃到其他控件上造成不必要的干扰事件(比如选中文字等效果)
    4. 每个事件处理完毕后,都要立即取消冒泡。
    5. 拖动窗体边缘改变尺寸的实现:
      在每个方向上(上下左右,4个角,一共8个方向),放置一个透明的 div 专门处理鼠标事件。这样可以做到与具体页面的设计无关。
    6. resize 或拖动时都对边界条件做修正。防止超出窗体边界造成无法继续操作。
    7. 移动到边缘的“磁铁”效果。
    8. 需要实现 IE/FireFox 的兼容性。
      1) 对鼠标定位的不同计算逻辑。
      2) 添加事件处理方法的不同语法。
      3) 其他。。。
    9. 需要仔细考量各个层的 z-index.

  • 相关阅读:
    poj 3070(矩阵快速幂入门)
    算阶乘质因数的个数(CodeForces 546D)
    hdu1237(表达式求值)
    分治法—hdu1007
    hdu-2089+初学数位dp!
    hdu-2089+初学数位dp
    线段树入门(更新单个节点)
    CodeForces 1131B(思维题)
    CodeForces 1040B(思维题)
    文献的查找下载与阅读
  • 原文地址:https://www.cnblogs.com/RChen/p/770567.html
Copyright © 2011-2022 走看看