首页
微信
安卓
接口
移动
前端
专题
文档库
工具
网址
§
ITPOW
>>
文档
>>
JavaScript
>>
鼠标键盘
JavaScript拖拽(连载四)
作者:chilleen 来源:
ITPOW
日期:2006-1-1
拖拽时原层保持不动,复制一个内容层,运行代码看看。
<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312"> <title>拖拽</title> <style type="text/css"> body { margin:0px; } #b { width:100px; height:50px; border:1px solid #666666; background-color:#FFCCCC; } #nf, #f { position:absolute;/*重要*/ width:300px; height:50px; border:1px solid #666666; background-color:#CCCCCC; cursor:move; } .docked { display:none; filter:alpha(opacity=100); } .actived { display:block; filter:alpha(opacity=20); } </style> </head> <body > <div id="b"></div> <div id="nf" unselectable="on"><img src="http://www.itpow.com/images/logo.gif" alt="拖我">文字</div> <div id="f" class="docked" unselectable="on"></div> <script type="text/javascript" language="javascript"> <!-- //获得物件对象 var b = document.getElementById("b"); var nf = document.getElementById("nf"); var f = document.getElementById("f"); //配置物件位置 var b_orgnX = 0; var b_orgnY = 0; var f_orgnX = 200; var f_orgnY = 0; //设置物件位置 b.style.pixelLeft = b_orgnX; b.style.pixelTop = b_orgnY; nf.style.pixelLeft = f_orgnX; nf.style.pixelTop = f_orgnY; f.style.pixelLeft = f_orgnX; f.style.pixelTop = f_orgnY; //拖拽过程中相关变量 var draging = false; //是否处于拖拽中 var offsetX = 0; //X方向左右偏移量 var offsetY = 0; //Y方向上下偏移量 //准备拖拽 function BeforeDrag() { if (event.button != 1) { return; } f.innerHTML = nf.innerHTML; //复制内容 offsetX = document.body.scrollLeft + event.clientX-nf.style.pixelLeft; offsetY = document.body.scrollTop + event.clientY-nf.style.pixelTop; f.className = "actived"; draging = true; } //拖拽中 function OnDrag() { if(!draging) { return; } //更新位置 event.returnValue = false; f.style.pixelLeft = document.body.scrollLeft + event.clientX-offsetX; f.style.pixelTop = document.body.scrollTop + event.clientY-offsetY; } //结束拖拽 function EndDrag() { if (event.button != 1) { return; } draging = false; //f.className = "docked";这里得提到后面去 if (f.style.pixelLeft>=b.style.pixelLeft && f.style.pixelLeft<=(b.style.pixelLeft+b.offsetWidth) && f.style.pixelTop>=b.style.pixelTop && f.style.pixelTop<=(b.style.pixelTop+b.offsetHeight)) { //拖拽块位于基块中,自动定位到基块位置 nf.style.pixelLeft = b.style.pixelLeft; nf.style.pixelTop = b.style.pixelTop; } else { //拖拽块位于基块外,将拖拽块位置复原 nf.style.pixelLeft = f_orgnX; nf.style.pixelTop = f_orgnY; } f.className = "docked"; } nf.onmousedown = BeforeDrag; document.onmousemove = OnDrag; document.onmouseup = EndDrag;//使用document更保险 //--> </script> </body> </html>
[Ctrl+A 全部选择 提示:你可先修改部分代码,再按运行]
相关文章
创建于2005年
渝ICP备05010272号-1
电邮:
cftea@126.com
即将跳转...