以前我發過一個：實現瀏覽器兼容的漂浮窗體拖動/改變尺寸的技術要點

另外還提到一個 jquery 的插件 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);
})

注意上面代碼中 unbind 事件也是很必要的。

另外推薦一個很好的 jquery 插件 —— background iframe.
以前我們寫網頁中的日歷控件之類的，為了遮住 <select> （IE 6.0 或以下)，一般都是用一個

<div>
??<iframe></iframe>
</div>
來加載彈出的內容。但是這樣有個問題，就是加載的文檔和當前文檔不是一個頁面，那么在 asp.net 等后臺代碼里，就不是很方便做數據綁定，因為多了一個頁面，就需要多出很多不必要的變量傳遞工作。

而 background iframe 的原理是，你可以在當前頁面的 <div></div> 里直接寫彈出內容，它負責動態的在這個 div 中插入一個透明的 iframe 作為背景的遮罩，這樣也一樣能達到遮擋 <select> 的效果。
調用方式也非常簡單：

$("#some_layer").bgiframe();
這樣就可以了。

這里聯想到，編程真的是思路最重要。記得以前看 meizz 的日歷控件代碼，通過 iframe 的方式寫入，實現很復雜，現在如果換了 background iframe 這個思路，問題很簡單就解決了。

總結

以上是生活随笔為你收集整理的漂浮窗口拖动杂谈（续）的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。