资料
表格
制度
合同
管理
职场
经营
创业
范文
总结
计划
作文
文章
美文
词句
教程
模板
图片
字体
图标
办公
人事
财务
生产
管理资源吧首页
>>>
教程
>>>
编程
>>>
JavaScript教程
>>>
一个超简单的JS拖拽实现代码(兼容IE,Firefox)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>runcode</title> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <meta name="Author" content="Sheneyan" /> <img src="/_New/_cj/myeditor/sysimage/space.gif" class="ewebeditor__script" _ewebeditor_fake_tag="script" _ewebeditor_fake_value="%3Cscript%20type%3D%22text%2Fjavascript%22%3E%20%0D%0A%2F**%20%0D%0A*%E5%8F%96%E5%BE%97%E5%85%83%E7%B4%A0%E7%9A%84%E7%9C%9F%E5%AE%9Ecss%E5%B1%9E%E6%80%A7%20%0D%0A*%40param%20%7BObject%7D%20d%20%E5%85%83%E7%B4%A0%20%0D%0A*%40param%20%7BString%7D%20a%20%E5%85%83%E7%B4%A0%E7%9A%84css%E5%B1%9E%E6%80%A7%E5%90%8D%20%0D%0A*%40version%200.2%20%0D%0A*%2F%20%0D%0Afunction%20gs(d%2Ca)%7B%20%0D%0Aif%20(d.currentStyle)%7B%20%0D%0Avar%20curVal%3Dd.currentStyle%5Ba%5D%20%0D%0A%7Delse%7B%20%0D%0Avar%20curVal%3Ddocument.defaultView.getComputedStyle(d%2C%20null)%5Ba%5D%20%0D%0A%7D%20%0D%0Areturn%20curVal%3B%20%0D%0A%7D%20%0D%0A%2F**%20%0D%0A*%20%E5%8F%96%E5%BE%97%E9%BC%A0%E6%A0%87%E5%9D%90%E6%A0%87%20%0D%0A*%20%40return%20Position%20%0D%0A*%2F%20%0D%0Afunction%20getMouseLocation(e)%7B%20%0D%0Aif(!document.all)%7B%20%0D%0AmouseX%20%3D%20e.pageX%3B%20%0D%0AmouseY%20%3D%20e.pageY%3B%20%0D%0A%7D%20%0D%0Aelse%7B%20%0D%0AmouseX%20%3D%20event.x%20%2B%20document.body.scrollLeft%3B%20%0D%0AmouseY%20%3D%20event.y%20%2B%20document.body.scrollTop%3B%20%0D%0A%7D%20%0D%0Areturn%20%7Bx%3AmouseX%2Cy%3AmouseY%7D%3B%20%0D%0A%7D%20%0D%0A%2F**%20%0D%0A*%20%E6%8B%96%E5%8A%A8%E5%AF%B9%E8%B1%A1%20%0D%0A*%20%40param%20%7BDOM%20Object%7D%20DOM%E5%AF%B9%E8%B1%A1%20%0D%0A*%2F%20%0D%0Afunction%20drag(e%2Cobj)%7B%20%0D%0Avar%20p1%20%3D%20getMouseLocation(e)%3B%20%0D%0Avar%20startRight%20%3D%20null%3B%20%0D%0Avar%20startTop%20%3D%20null%3B%20%0D%0Avar%20startLeft%20%3D%20null%3B%20%0D%0Avar%20startBottom%20%3D%20null%3B%20%0D%0Avar%20l%20%3D%20gs(obj%2C%22left%22)%3B%20%0D%0Avar%20r%20%3D%20gs(obj%2C%22right%22)%3B%20%0D%0Avar%20t%20%3D%20gs(obj%2C%22top%22)%3B%20%0D%0Avar%20b%20%3D%20gs(obj%2C%22bottom%22)%3B%20%0D%0Aif(!l)%20%0D%0AstartRight%20%3D%20parseInt(r)%3B%20%0D%0Aelse%20%0D%0AstartLeft%20%3D%20parseInt(l)%3B%20%0D%0Aif(!t)%20%0D%0AstartBottom%20%3D%20parseInt(b)%3B%20%0D%0Aelse%20%0D%0AstartTop%20%3D%20parseInt(t)%3B%20%0D%0Aif(obj.setCapture)%20%0D%0Aobj.setCapture()%3B%20%0D%0Aelse%20if%20(window.captureEvents)%20%0D%0Awindow.captureEvents(Event.MOUSEMOVE%7CEvent.MOUSEUP)%3B%20%0D%0Adocument.onmousemove%20%3D%20function(e)%7B%20%0D%0Avar%20p2%20%3D%20getMouseLocation(e)%3B%20%0D%0Avar%20xMove%20%3D%20p2.x-p1.x%3B%20%0D%0Avar%20yMove%20%3D%20p2.y-p1.y%3B%20%0D%0Aif(!l)%20%0D%0Aobj.style.right%20%3D%20(startRight%20-%20xMove)%2B%22px%22%3B%20%0D%0Aelse%20%0D%0Aobj.style.left%20%3D%20(startLeft%20%2B%20xMove)%2B%22px%22%3B%20%0D%0Aif(!t)%20%0D%0Aobj.style.bottom%20%3D%20(startBottom%20-%20yMove)%2B%22px%22%3B%20%0D%0Aelse%20%0D%0Aobj.style.top%20%3D%20(startTop%20%2B%20yMove)%2B%22px%22%3B%20%0D%0A%7D%20%0D%0Adocument.onmouseup%20%3D%20function()%7B%20%0D%0Aif(obj.releaseCapture)%20%0D%0Aobj.releaseCapture()%3B%20%0D%0Aelse%20if%20(window.captureEvents)%20%0D%0Awindow.captureEvents(Event.MOUSEMOVE%7CEvent.MOUSEUP)%3B%20%0D%0Adocument.onmouseup%20%3D%20null%3B%20%0D%0Adocument.onmousemove%20%3D%20null%3B%20%0D%0A%7D%20%0D%0A%7D%20%0D%0A%3C%2Fscript%3E"> <style type="text/css"> div#test{border:solid 1px blue;background:red;position:absolute;left:100px;top:200px;width:200px;height:200px;cursor:pointer;} </style> </head> <body> <div id="test" onmousedown="drag(event,this)">拖我拖我拖我拖我拖我拖我拖我<div> </body> </html>
[Ctrl+A 全选 注:
如需引入外部Js需刷新才能执行
]
javascript支持firefox,ie7页面布局拖拽效果代码
教程首页
更多教程