.NET 浮動視窗拖曳實作與 jQuery easydrag 修正

介紹 .NET 中浮動視窗拖曳的實作方法，並針對 jQuery 外掛 easydrag 的一個 Bug 提供修正方案。

easydrag Bug 分析

在套用 easydrag 的頁面中，某些情況下頁面載入時會出現「找不到物件」的腳本錯誤。原因是 easydrag 過早綁定 document 的 mousemove 與 mouseup 事件，但腳本載入時 document 尚未 ready。

修正方案：延遲事件綁定

function mousemove_handler(e) {
    // 處理滑鼠移動
}
function mouseup_handler(e) {
    // 解除綁定
    $(document).unbind("mousemove", mousemove_handler).unbind("mouseup", mouseup_handler);
}
$("#拖曳目標").mousedown(function() {
    // 延遲綁定
    $(document).mousemove(mousemove_handler).mouseup(mouseup_handler);
})

關鍵點：在 mousedown 時才綁定事件，mouseup 時解除綁定，避免頁面載入階段的錯誤。

推薦外掛：background iframe

傳統做法在 <div> 中載入 <iframe> 遮擋 <select> 元素，但會導致資料綁定不便。background iframe 原理是在目前頁面的 <div> 中直接撰寫彈出內容，動態插入透明 iframe 做背景遮罩，同樣能遮擋 <select>，且不需跨頁面傳遞資料。

$("#some_layer").bgiframe();

一行程式碼即可解決 IE6 下 select 元素層級過高的問題。