层拖动Drag Div

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

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值