層拖動Drag Div
來源:互聯網
上載者:User
代碼如下:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><br /><html xmlns="http://www.w3.org/1999/xhtml"><br /><head><br /><title> new document </title><br /><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><br /><meta name="generator" content="editplus" /><br /><meta name="author" content="" /><br /><meta name="keywords" content="" /><br /><meta name="description" content="" /><br /></head><br /><body><br /><script type="text/javascript"><br /><!--<br />function $(id)<br />{<br />return document.getElementById(id);<br />}<br />var g_CatchDiv = false;<br />var g_obj;<br />var g_objName;<br />function CatchMoveDiv(obj, name)<br />{<br />window.setTimeout('g_CatchDiv = true', 200);<br />g_obj = obj;<br />g_objName = name;<br />var oMove = $('divMove');<br />var MoveObj = obj;<br />oMove.innerHTML = MoveObj.outerHTML;<br />oMove.style.cursor = '';<br />oMove.style.filter = 'alpha(opacity=50)';<br />// document.body.style.filter = 'alpha(opacity = 30)';<br />// oMove.style.filter = 'progid:DXImageTransform.Microsoft.Alpha(opacity=50)';<br />oMove.style.left = event.x - 35;<br />oMove.style.top = event.y + 10;<br />oMove.setCapture();<br />document.onmouseup = function() {ReleaseDiv();};<br />document.onmousemove = function() {MoveDiv();};<br />}<br />function ReleaseDiv()<br />{<br />window.setTimeout('g_CatchDiv = false', 200)<br />var oMove = $('divMove');<br />oMove.style.display = 'none';<br />oMove.releaseCapture();<br />document.onmousemove = null;<br />}<br />function MoveDiv()<br />{<br />if (g_CatchDiv)<br />{<br />var oMove = $('divMove');<br />oMove.style.left = event.x - 35;<br />oMove.style.top = event.y;<br />oMove.style.display = '';<br />}<br />}<br />//--><br /></script><br /><div id="divA" style="cursor:pointer; border:solid 1px" onmousedown="if (!g_CatchDiv) {CatchMoveDiv(this, this.innerText);}" onmousemove="if (g_CatchDiv && g_obj != this) {if (confirm('你確定將〖' + g_objName + '〗移動到〖' + this.innerText + '〗下嗎?')) {}}">AAA</div><br /><div> </div><br /><div id="divB" style="cursor:pointer; border:solid 1px" onmousedown="if (!g_CatchDiv) {CatchMoveDiv(this, this.innerText);}" onmousemove="if (g_CatchDiv && g_obj != this) {if (confirm('你確定將〖' + g_objName + '〗移動到〖' + this.innerText + '〗下嗎?')) {}}">BBB</div><br /><div id="divMove" style="position:absolute;display:none; z-index:0;"></div><br /><input id="btnSubmit" type="submit" onmousedown="if (!g_CatchDiv) {CatchMoveDiv(this, this.value);}" onmousemove="if (g_CatchDiv && g_obj != this) {if (confirm('你確定將〖' + g_objName + '〗移動到〖' + this.value + '〗下嗎?')) {}}" value="Submit" /><br /><input type="reset" onmousedown="if (!g_CatchDiv) {CatchMoveDiv(this, this.value);}" onmousemove="if (g_CatchDiv && g_obj != this) {if (confirm('你確定將〖' + g_objName + '〗移動到〖' + this.value + '〗下嗎?')) {}}" value="Reset" /><br /></body><br /></html>
[Ctrl+A 全選 提示:你可先修改部分代碼,再點運行代碼]