JavaScript 拖拽实现（附注释），最经典简单短小精悍！

　　效果预览：

　　实现源代码：

<html> 
<head> 
<title>Drag[笑的自然最后修改编辑]</title> 
</head> 
<body> 
<div id="r" style="position:absolute; left:100px; top:100px; background-color:#F00; height:80px; width:80px; cursor: pointer;"></div> 
<div id="g" style="position:absolute; left:250px; top:100px; background-color:#0F0; height:80px; width:80px; cursor: pointer;"></div> 
<div id="b" style="position:absolute; left:400px; top:100px; background-color:#00F; height:80px; width:80px; cursor: pointer;"></div> 
<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%0Avar%20Drag%20%3D%20%7B%20%0D%0A%20%20%20%20%2F%2F%E5%BD%93%E5%89%8D%E8%A2%ABdrag%E7%9A%84%E5%AF%B9%E8%B1%A1%20%0D%0A%20%20%20%20obj%3A%20null%2C%20%0D%0A%20%20%20%20%2F%2F%E5%88%9D%E5%A7%8B%E5%8C%96%20%0D%0A%20%20%20%20init%3A%20function(id)%7B%20%0D%0A%20%20%20%20%20%20%20%20var%20o%20%3D%20document.getElementById(id)%3B%20%0D%0A%20%20%20%20%20%20%20%20%2F%2F%E5%BD%93onmousedown%E5%BC%80%E5%A7%8B%E6%8B%96%E6%8B%BD%20%0D%0A%20%20%20%20%20%20%20%20o.onmousedown%20%3D%20Drag.start%3B%20%0D%0A%20%20%20%20%7D%2C%20%0D%0A%20%20%20%20start%3A%20function(e)%7B%20%0D%0A%20%20%20%20%20%20%20%20var%20o%20%3D%20Drag.obj%20%3D%20this%3B%20%0D%0A%20%20%20%20%20%20%20%20%2F%2FlastMouseX%EF%BC%8ClastMouseY%E8%AE%B0%E5%BD%95%E4%B8%8A%E6%AC%A1%E9%BC%A0%E6%A0%87%E7%9A%84%E4%BD%8D%E7%BD%AE%20%0D%0A%20%20%20%20%20%20%20%20o.lastMouseX%20%3D%20Drag.getEvent(e).x%3B%20%0D%0A%20%20%20%20%20%20%20%20o.lastMouseY%20%3D%20Drag.getEvent(e).y%3B%20%0D%0A%20%20%20%20%20%20%20%20%2F%2F%E5%BD%93onmousemove%E5%BC%80%E5%A7%8B%E7%A7%BB%E5%8A%A8%20%0D%0A%20%20%20%20%20%20%20%20document.onmousemove%20%3D%20Drag.move%3B%20%0D%0A%20%20%20%20%20%20%20%20%2F%2F%E5%BD%93onmouseup%E7%BB%88%E6%AD%A2%E6%8B%96%E6%8B%BD%20%0D%0A%20%20%20%20%20%20%20%20document.onmouseup%20%3D%20Drag.end%3B%20%0D%0A%20%20%20%20%7D%2C%20%0D%0A%20%20%20%20move%3A%20function(e)%7B%20%0D%0A%20%20%20%20%20%20%20%20var%20o%20%3D%20Drag.obj%3B%20%0D%0A%20%20%20%20%20%20%20%20%2F%2Fdx%2C%20dy%E8%A1%A8%E7%A4%BA%E9%BC%A0%E6%A0%87%E7%A7%BB%E5%8A%A8%E7%9A%84%E8%B7%9D%E7%A6%BB%20%0D%0A%20%20%20%20%20%20%20%20var%20dx%20%3D%20Drag.getEvent(e).x%20-%20o.lastMouseX%3B%20%0D%0A%20%20%20%20%20%20%20%20var%20dy%20%3D%20Drag.getEvent(e).y%20-%20o.lastMouseY%3B%20%0D%0A%20%20%20%20%20%20%20%20%2F%2F%E5%9B%A0%E4%B8%BAelement.style.left%E9%80%9A%E5%B8%B8%E8%BF%94%E5%9B%9E%E7%9A%84%E7%BB%93%E6%9E%9C%E6%98%AF'200px'%E7%9A%84%E5%BD%A2%E5%BC%8F%EF%BC%8C%E6%89%80%E4%BB%A5%E8%A6%81%E7%94%A8parseInt%E8%BD%AC%E5%8C%96%20%0D%0A%20%20%20%20%20%20%20%20var%20left%20%3D%20parseInt(o.style.left)%20%2B%20dx%20%3B%20%0D%0A%20%20%20%20%20%20%20%20var%20top%20%3D%20parseInt(o.style.top)%20%2B%20dy%3B%20%0D%0A%20%20%20%20%20%20%20%20o.style.left%20%3D%20left%3B%20%0D%0A%20%20%20%20%20%20%20%20o.style.top%20%3D%20top%3B%20%0D%0A%20%20%20%20%20%20%20%20o.lastMouseX%20%3D%20Drag.getEvent(e).x%3B%20%0D%0A%20%20%20%20%20%20%20%20o.lastMouseY%20%3D%20Drag.getEvent(e).y%3B%20%0D%0A%20%20%20%20%7D%2C%20%0D%0A%20%20%20%20end%3A%20function(e)%7B%20%0D%0A%20%20%20%20%20%20%20%20document.onmousemove%20%3D%20null%3B%20%0D%0A%20%20%20%20%20%20%20%20document.onMouseup%20%3D%20null%3B%20%0D%0A%20%20%20%20%20%20%20%20Drag.obj%20%3D%20null%3B%20%0D%0A%20%20%20%20%7D%2C%20%0D%0A%20%20%20%20%2F%2F%E8%BE%85%E5%8A%A9%E5%87%BD%E6%95%B0%EF%BC%8C%E5%A4%84%E7%90%86IE%E5%92%8CFF%E4%B8%8D%E5%90%8C%E7%9A%84event%E6%A8%A1%E5%9E%8B%20%0D%0A%20%20%20%20getEvent%3A%20function(e)%7B%20%0D%0A%20%20%20%20%20%20%20%20if%20(typeof%20e%20%3D%3D%20'undefined')%7B%20%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20e%20%3D%20window.event%3B%20%0D%0A%20%20%20%20%20%20%20%20%7D%20%0D%0A%20%20%20%20%20%20%20%20%2F%2Falert(e.x%3Fe.x%20%3A%20e.layerX)%3B%20%0D%0A%20%20%20%20%20%20%20%20if(typeof%20e.x%20%3D%3D%20'undefined')%7B%20%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20ee.x%20%3D%20e.layerX%3B%2F%2F%E5%A4%8D%E5%88%B6%E4%BA%86n%E9%81%8D%EF%BC%8C%E5%88%B0%E4%BA%86csdn%E5%B0%B1%E5%8F%98%E6%88%90ee.x%E4%BA%86%20%0D%0A%20%20%20%20%20%20%20%20%7D%20%0D%0A%20%20%20%20%20%20%20%20if(typeof%20e.y%20%3D%3D%20'undefined')%7B%20%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20ee.y%20%3D%20e.layerY%3B%2F%2F%E5%A4%8D%E5%88%B6%E4%BA%86n%E9%81%8D%EF%BC%8C%E5%88%B0%E4%BA%86csdn%E5%B0%B1%E5%8F%98%E6%88%90ee.x%E4%BA%86%20%0D%0A%20%20%20%20%20%20%20%20%7D%20%0D%0A%20%20%20%20%20%20%20%20return%20e%3B%20%0D%0A%20%20%20%20%7D%20%0D%0A%7D%3B%20%0D%0A%2F%2F%E6%B5%8B%E8%AF%95%E4%BB%A3%E7%A0%81%E5%BC%80%E5%A7%8B%EF%BC%8C%E4%BD%BF%E4%B8%89%E4%B8%AAdiv%E5%85%B7%E6%9C%89drag%20and%20drop%E7%9A%84%E8%83%BD%E5%8A%9B%E3%80%82%20%0D%0ADrag.init('r')%3B%20%0D%0ADrag.init('g')%3B%20%0D%0ADrag.init('b')%3B%20%0D%0A%2F%2F%20--%3E%3C%2Fscript%3E"> 
</body> 
</html>

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

教程首页更多教程