JS 拖动效果实现代码比较简单

<!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>JS拖动效果</title> 
<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%3C!--%20%0D%0Afunction%20DragPanel(Panel%2Cevent)%20%0D%0A%7B%20%0D%0Avar%20delayX%3Devent.clientX-parseInt(Panel.style.left)%3B%20%0D%0Avar%20delayY%3Devent.clientY-parseInt(Panel.style.top)%3B%20%0D%0A%0D%0Adocument.attachEvent(%22onmousemove%22%2CHandleMove)%3B%20%0D%0Adocument.attachEvent(%22onmouseup%22%2CHandleUp)%3B%20%0D%0A%0D%0Aevent.cancelBubble%3Dtrue%3B%20%0D%0Aevent.returnValue%3Dfalse%3B%20%0D%0A%0D%0Afunction%20HandleMove(e)%20%0D%0A%7B%20%0D%0Ae%3Dwindow.event%3B%20%0D%0APanel.style.left%3Devent.clientX-delayX%2B%22px%22%3B%20%0D%0APanel.style.top%3Devent.clientY-delayY%2B%22px%22%3B%20%0D%0Aevent.cancelBubble%3Dtrue%3B%20%0D%0A%7D%20%0D%0Afunction%20HandleUp()%20%0D%0A%7B%20%0D%0Adocument.detachEvent(%22onmousemove%22%2CHandleMove)%3B%20%0D%0Adocument.detachEvent(%22onmouseup%22%2CHandleUp)%3B%20%0D%0A%7D%20%0D%0Aevent.cancelBubble%3Dtrue%3B%20%0D%0A%7D%20%0D%0A%0D%0A%2F%2F%20--%3E%3C%2Fscript%3E"> 
</head> 
<body> 
<div style="position:absolute; width:200px; height:150px; left:100px; top:300px; background-color:Maroon;"> 
<div style="background-color:Red;" style="background-color:Red;" onmousedown="DragPanel(this.parentNode,event)">Drag Me</div> 
</div> 
</body> 
</html>

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

教程首页更多教程

JS 拖动效果实现代码 比较简单

JS 拖动效果实现代码比较简单