[导入]实现浏览器兼容的漂浮窗体拖动/改变尺寸的技术要点

应用场景：
  用一个 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.

木野狐 2007-06-04 13:30 发表评论

文章来源:http://www.cnblogs.com/RChen/archive/2007/06/04/770567.html