<p>内嵌iframe的jquery拖动层</p>
<p></p>
<p>调用方法：</p>
<p><script type="text/javascript"><br />
$(function() {<br />
parent.setDrag($("#PopupTitle"), 'popupDiv');<br />
});<br />
</script></p>
<p></p>
<p></p>
<p><br />
其中，PopupTitle是触发拖拉事件的标签ID，popupDiv是iframe的父标签ID，拖拉事件的代码如下：</p>
<p></p>
<p>function setDrag(obj, pid) {<br />
var parent = $("#" + pid);<br />
var div = $("#movePopup");</p>
<p> obj.mousedown(function(e) {<br />
if (e.target.nodeName.toLowerCase() == 'img') return;<br />
div.css({<br />
height: parent.height(),<br />
width: parent.width(),<br />
top: parent.css("top"),<br />
left: parent.css("left"),<br />
opacity: 0.2<br />
});<br />
parent.hide();<br />
if (isIE) {<br />
$$("movePopup").setCapture();<br />
}</p>
<p> var offset = obj.offset();<br />
var x = e.clientX;<br />
var y = e.clientY;</p>
<p> $(document).bind("mousemove", function(event) {<br />
var currentX = event.clientX - x;<br />
var currentY = event.clientY - y;<br />
if (currentX < 0) currentX = 0;<br />
if (currentY < 0) currentY = 0;<br />
if (currentX + div.width() > document.documentElement.clientWidth)<br />
currentX = document.documentElement.clientWidth - div.width();<br />
if (currentY + div.height() > document.documentElement.clientHeight)<br />
currentY = document.documentElement.clientHeight - div.height();</p>
<p> div.css({<br />
left: currentX,<br />
top: currentY<br />
});<br />
});</p>
<p> $(document).mouseup(function() {<br />
$(document).unbind("mousemove");<br />
if (isIE) {<br />
$$("movePopup").releaseCapture();<br />
}<br />
parent.css({<br />
top: div.css("top"),<br />
left: div.css("left")<br />
});<br />
div.css({<br />
width: 0,<br />
height: 0<br />
});<br />
parent.show();<br />
});</p>
<p> return false;<br />
});<br />
}</p>
<p></p>
<p></p>
<p></p>
<p><br />
原理：触发拖动事件，程序将隐藏iframe层并显示一个同样位置和大小的空层进入拖拽，当鼠标左键松开时，隐藏空层，将其坐标设置到iframe层并显示。不直接拖拉iframe层的原因是为了避免所引用页面代码过多导致拖拉时出现闪烁的情况。</p>
<p>浏览器兼容：IE6/7/8/9、firefox、chrome，其它未知。</p>
<p></p>
<p></p>
<p></p>