在Iframe框架裡使用了jquery.easydrag.handler.beta2.js外掛，用來拖動DIV塊。

JS程式碼如下： 

<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/jquery.easydrag.handler.js"></script>
<script type="text/javascript">
$(document).ready(function(){
    $("#msgbox").easydrag();
    $("#msgbox").setHandler("msgtitle");
});
</script>
 

HTML程式碼如下：

<div id='msgbox' style="width:300px;height:150px;solid:1px solid green;">
    <div id='msgtitle' style="height:30px;">title</div>
    msgbox content
</div>

出現問題：

沒有$("#msgbox").setHandler("msgtitle")這一句還好，多了這一句之後，拖拽DIV就沒了個範圍，也就是說可以把DIV無限制的往下拖或者往右拖，哪怕拖得文件出現空白窗口出現滾動條~

比如下圖：藍色塊本是iframe框架的最底部了，可是DIV竟可無限的往下拖拽，出現了一片預期之外的空白。

或許是因為iframe裡的頁面的body高度沒有限制吧，具體原因俺也沒弄清楚。

俺從外掛程式碼入手，修改了$.updatePosition()函式，限制拖動塊的位置不能超出iframe框的範圍.

修改後的程式碼如下：

$.updatePosition = function(e) {
		var pos = $.getMousePosition(e);

		var spanX = (pos.x - lastMouseX);
		var spanY = (pos.y - lastMouseY);
		
		var elemWidth = parseInt($(currentElement).css("width"));
		var elemHeight = parseInt($(currentElement).css("height"));
		var newElemTop = ((lastElemTop + spanY)>(document.body.offsetHeight-elemHeight))?(document.body.offsetHeight-elemHeight):(lastElemTop + spanY);
		var newElemLeft = ((lastElemLeft + spanX)>(document.body.offsetWidth-elemWidth))?(document.body.offsetWidth-elemWidth):(lastElemLeft + spanX);
		if(newElemTop<0)newElemTop=0;
		if(newElemLeft<0)newElemLeft=0;

		$(currentElement).css("top", newElemTop);
		$(currentElement).css("left", newElemLeft);
};