要实现div的任意拖动，我们不妨分析一下整个过程。 当鼠标点击div时，触发一个事件，让div的位置属性（left，top）随着鼠标位置变化而变化，当鼠标释放后，div的位置属性就用了鼠标释放时的位置。 鼠标点击时触发事件是很容易做到的，只要在div的标签里加上onmouseclick就可以了，现在我们要解决的问题是如何让div的位置随着鼠标的位置变化而变化。 虽然这可能是一个很简单的推理过程，不过还是罗嗦点说清楚吧。div的left和top是div左上角的坐标，当我们把鼠标移到div中点击的时候，无疑鼠标的坐标和div的坐标是不一致的，这时候如果我们简单的让div的坐标等于鼠标的坐标，那么看起来的效果就不是那么完美了，所以我们先要得到鼠标的坐标和div坐标的差，然后在鼠标移动到的时候，在鼠标坐标上减去这个差来得到div的坐标（如果不太明白，那就先补习一下网页的基础知识）。 接下来的事情就简单了，当鼠标移动的时候，我们不断的计算得到div的坐标，并改变，在鼠标释放的时候，这个事件就被移除。 整个js函数如下： function beginDrag(elementToDrag,event) { var deltaX=event.clientX-parseInt(elementToDrag.style.left); var deltaY=event.clientY-parseInt(elementToDrag.style.top); if(document.addEventListener) { document.addEventListener(”mousemove”,moveHandler,true); document.addEventListener(”mouseup”,upHandler,true); //document.addEventListener(”mouseout”,upHandler,true); } else if(document.attachEvent) { document.attachEvent(”onmousemove”,moveHandler); document.attachEvent(”onmouseup”,upHandler); //document.attachEvent(”onmouseout”,upHandler); } if(event.stopPropagation) event.stopPropagation(); else event.cancelBubble=true; if(event.preventDefault) event.preventDefault(); else event.returnValue=false; function moveHandler(e) { 　　if (!e) e=window.event; //如果是IE的事件对象，那么就用window.event 　　//全局属性，否则就用DOM二级标准的Event对象。 elementToDrag.style.left=(e.clientX-deltaX)+”px”; elementToDrag.style.top=(e.clientY-deltaY)+”px”; if(e.stopPropagation) e.stopPropagation(); else e.cancelBubble=true; } function upHandler(e) { if(document.removeEventListener) { document.removeEventListener(”mouseup”,upHandler,true); document.removeEventListener(”mousemove”,moveHandler,true);} else { document.detachEvent(”onmouseup”,upHandler); document.detachEvent(”onmousemove”,moveHandler);} } if (!e) e=window.event; if(e.stopPropagation) e.stopPropagation(); else e.cancelBubble=true; }