實現瀏覽器相容的漂浮窗體拖動 改變尺寸的技術要點

應用場景：

用乙個 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.

實現瀏覽器相容的漂浮窗體拖動 改變尺寸的技術要點

應用場景 用乙個 div 套乙個 iframe 實現的漂浮視窗，要實現拖動標題欄自由移動，拖動邊緣改變尺寸的功能。要實現流暢的拖動效果，其要點總結如下 1.處理這些事件 mousemove,mousedown,mouseup.2.同時處理當前視窗和父視窗 document 的滑鼠移動事件，防止移動出...

瀏覽器的相容

瀏覽器相容問題一 不同瀏覽器的標籤預設的外補丁和內補丁不同 問題症狀 隨便寫幾個標籤，不加樣式控制的情況下，各自的margin 和padding差異較大。解決方案 css裡 瀏覽器相容問題二 塊屬性標籤float後，又有橫行的margin情況下，在ie6顯示margin比設定的大 問題症狀 常見症狀...

瀏覽器的相容

css bug css樣式在各瀏覽器中解析不一致的情況，或者說css樣式在瀏覽器中不能正確顯示的問題稱為css bug.css hack css中，hack是指一種相容css在不同瀏覽器中正確顯示的技巧方法，因為它們都屬於個人對css 的非官方的修改，或非官方的補丁。有些人 更喜歡使用patch 補...