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.

  • 相关阅读:
    [HNOI2002]营业额统计
    HDU 1374
    HDU 3345
    HDU 2089
    Graham扫描法
    Codeforces 1144D Deduction Queries 并查集
    Codeforces 916E Jamie and Tree 线段树
    Codeforces 1167F Scalar Queries 树状数组
    Codeforces 1167E Range Deleting
    Codeforces 749E Inversions After Shuffle 树状数组 + 数学期望
  • 原文地址:https://www.cnblogs.com/RChen/p/770567.html
Copyright © 2011-2022 走看看