比较精简的Javascript拖动效果函数代码

<html>  
<head><title>拖动效果函数演示 by Longbill.cn</title>  
<style>  
body   
{  
    font-size:12px;  
    color:#333333;  
    border : 0px solid blue;  
}  
div  
{  
    position : absolute;  
    background-color : #c3d9ff;  
    margin : 0px;  
    padding : 5px;  
    border : 0px;  
    width : 100px;  
    height:100px;  
}  
</style>  
</head>  
<body>  
<img src="/_New/_cj/myeditor/sysimage/space.gif" class="ewebeditor__script" _ewebeditor_fake_tag="script" _ewebeditor_fake_value="%3Cscript%3E%20%20%0D%0Afunction%20drag(o%2Cs)%20%20%0D%0A%7B%20%20%0D%0A%20%20%20%20if%20(typeof%20o%20%3D%3D%20%22string%22)%20o%20%3D%20document.getElementById(o)%3B%20%20%0D%0A%20%20%20%20o.orig_x%20%3D%20parseInt(o.style.left)%20-%20document.body.scrollLeft%3B%20%20%0D%0A%20%20%20%20o.orig_y%20%3D%20parseInt(o.style.top)%20-%20document.body.scrollTop%3B%20%20%0D%0A%20%20%20%20o.orig_index%20%3D%20o.style.zIndex%3B%20%20%0D%0A%20%20%20%20%20%20%20%20%20%20%0D%0A%20%20%20%20o.onmousedown%20%3D%20function(a)%20%20%0D%0A%20%20%20%20%7B%20%20%0D%0A%20%20%20%20%20%20%20%20this.style.cursor%20%3D%20%22move%22%3B%20%20%0D%0A%20%20%20%20%20%20%20%20this.style.zIndex%20%3D%2010000%3B%20%20%0D%0A%20%20%20%20%20%20%20%20var%20d%3Ddocument%3B%20%20%0D%0A%20%20%20%20%20%20%20%20if(!a)a%3Dwindow.event%3B%20%20%0D%0A%20%20%20%20%20%20%20%20var%20x%20%3D%20a.clientX%2Bd.body.scrollLeft-o.offsetLeft%3B%20%20%0D%0A%20%20%20%20%20%20%20%20var%20y%20%3D%20a.clientY%2Bd.body.scrollTop-o.offsetTop%3B%20%20%0D%0A%20%20%20%20%20%20%20%20%2F%2Fauthor%3A%20www.longbill.cn%20%20%0D%0A%20%20%20%20%20%20%20%20d.ondragstart%20%3D%20%22return%20false%3B%22%20%20%0D%0A%20%20%20%20%20%20%20%20d.onselectstart%20%3D%20%22return%20false%3B%22%20%20%0D%0A%20%20%20%20%20%20%20%20d.onselect%20%3D%20%22document.selection.empty()%3B%22%20%20%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%0D%0A%20%20%20%20%20%20%20%20if(o.setCapture)%20%20%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20o.setCapture()%3B%20%20%0D%0A%20%20%20%20%20%20%20%20else%20if(window.captureEvents)%20%20%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20window.captureEvents(Event.MOUSEMOVE%7CEvent.MOUSEUP)%3B%20%20%0D%0A%0D%0A%20%20%20%20%20%20%20%20d.onmousemove%20%3D%20function(a)%20%20%0D%0A%20%20%20%20%20%20%20%20%7B%20%20%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20if(!a)a%3Dwindow.event%3B%20%20%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20o.style.left%20%3D%20a.clientX%2Bdocument.body.scrollLeft-x%3B%20%20%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20o.style.top%20%3D%20a.clientY%2Bdocument.body.scrollTop-y%3B%20%20%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20o.orig_x%20%3D%20parseInt(o.style.left)%20-%20document.body.scrollLeft%3B%20%20%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20o.orig_y%20%3D%20parseInt(o.style.top)%20-%20document.body.scrollTop%3B%20%20%0D%0A%20%20%20%20%20%20%20%20%7D%20%20%0D%0A%0D%0A%20%20%20%20%20%20%20%20d.onmouseup%20%3D%20function()%20%20%0D%0A%20%20%20%20%20%20%20%20%7B%20%20%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20if(o.releaseCapture)%20%20%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20o.releaseCapture()%3B%20%20%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20else%20if(window.captureEvents)%20%20%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20window.captureEvents(Event.MOUSEMOVE%7CEvent.MOUSEUP)%3B%20%20%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20d.onmousemove%20%3D%20null%3B%20%20%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20d.onmouseup%20%3D%20null%3B%20%20%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20d.ondragstart%20%3D%20null%3B%20%20%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20d.onselectstart%20%3D%20null%3B%20%20%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20d.onselect%20%3D%20null%3B%20%20%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20o.style.cursor%20%3D%20%22normal%22%3B%20%20%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20o.style.zIndex%20%3D%20o.orig_index%3B%20%20%0D%0A%20%20%20%20%20%20%20%20%7D%20%20%0D%0A%20%20%20%20%7D%20%20%0D%0A%20%20%20%20%20%20%0D%0A%20%20%20%20if%20(s)%20%20%0D%0A%20%20%20%20%7B%20%20%0D%0A%20%20%20%20%20%20%20%20var%20orig_scroll%20%3D%20window.onscroll%3Fwindow.onscroll%3Afunction%20()%7B%7D%3B%20%20%0D%0A%20%20%20%20%20%20%20%20window.onscroll%20%3D%20function%20()%20%20%0D%0A%20%20%20%20%20%20%20%20%7B%20%20%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20orig_scroll()%3B%20%20%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20o.style.left%20%3D%20o.orig_x%20%2B%20document.body.scrollLeft%3B%20%20%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20o.style.top%20%3D%20o.orig_y%20%2B%20document.body.scrollTop%3B%20%20%0D%0A%20%20%20%20%20%20%20%20%7D%20%20%0D%0A%20%20%20%20%7D%20%20%0D%0A%7D%20%20%0D%0A%3C%2Fscript%3E">

<div id="div1" style="left:10px;top:10px;">div1:我可以被拖动</div>  
<div id="div2" style="left:120px;top:10px;background-color : #f3d9ff">div2:来拖我呀</div>  
<div id="div3" style="left:230px;top:10px;background-color : #c3ffff">div3:我随便你拖</div>  
<div id="div4" style="left:10px;top:120px;background-color : #c3d944">div4:我可以随窗口滑动，把我拖到最下面，然后滚动网页看看</div>  
<div id="div5" style="left:120px;top:120px;background-color : #f3d944">作者: Longbill
<a href=http://www.longbill.cn target=_blank>www.longbill.cn</a>  
</div>  
<div id="div6" style="left:230px;top:120px;background-color : #e3f944;width:200px;">参数说明:
  
drag(obj [,scroll]);
  
obj:对象的id或对象本身;
  
scroll(可选):对象是否随窗口拖动而滑动，默认为否
  
鼠标右键查看源代码  
</div>

</body>

　　 [Ctrl+A 全选注:如需引入外部Js需刷新才能执行]

教程首页更多教程