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.

  • 相关阅读:
    Cuckoo for Hashing_双哈希表
    nyoj113_字符串替换
    nyoj366_D的小L_字典序_全排列
    二叉树的前序 中序 后序 遍历(递归/非递归)
    Java 学习路线
    leetcode 04 Median of Two Sorted Arrays
    ThreadLocal 的机制与内存泄漏
    try finally 执行顺序问题
    Java中的类加载器
    快速理解Java中的七种单例模式
  • 原文地址:https://www.cnblogs.com/RChen/p/770567.html
Copyright © 2011-2022 走看看