首页
微信
安卓
接口
移动
前端
专题
文档库
工具
网址
§
ITPOW
>>
文档
>>
JavaScript
>>
鼠标键盘
JavaScript拖拽(连载二)
作者:chilleen 来源:
ITPOW
日期:2005-12-30
与前一版本比较,增加了如下内容:
只允许左键拖动;
拖动时透明度改变透明度;
鼠标指针变化;
不会选中层中的文字。
待解决的问题,无法正确拖动图片,有人说使用ondragstart、ondrag、ondragend,但实际有两个问题:无法拖动样式的鼠标指针,无法触发EndDrag函数。
<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; } #f { position:absolute;/*重要*/ width:300px; height:50px; border:1px solid #666666; background-color:#CCCCCC; cursor:move; } .docked { filter:alpha(opacity=100); } .actived { filter:alpha(opacity=20); } </style> </head> <body > <div id="b"></div> <div id="f" class="docked" unselectable="on">文字</div> <script type="text/javascript" language="javascript"> <!-- //获得物件对象 var b = document.getElementById("b"); 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; 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; } offsetX = document.body.scrollLeft + event.clientX-f.style.pixelLeft; offsetY = document.body.scrollTop + event.clientY-f.style.pixelTop; f.className = "actived"; draging = true; } //拖拽中 function OnDrag() { if(!draging) { return; } //更新位置 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)) { //拖拽块位于基块中,自动定位到基块位置 f.style.pixelLeft = b.style.pixelLeft; f.style.pixelTop = b.style.pixelTop; } else { //拖拽块位于基块外,将拖拽块位置复原 f.style.pixelLeft = f_orgnX; f.style.pixelTop = f_orgnY; } } f.onmousedown = BeforeDrag; document.onmousemove = OnDrag; f.onmouseup = EndDrag; //--> </script> </body> </html>
[Ctrl+A 全部选择 提示:你可先修改部分代码,再按运行]
相关文章
创建于2005年
渝ICP备05010272号-1
电邮:
cftea@126.com
即将跳转...