層拖動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>&nbsp;</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 全選 提示:你可先修改部分代碼,再點運行代碼]

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.