在做web开发中,拖动一个元素是很常见的功能,特别是对于浮动层,最经常的操作就是去拖动它。这里列出了拖动的代码,作个总结,以备忘。代码如下:
function drag(elementToDrag, event) { var startX = event.clientX, startY = event.clientY; var origX = elementToDrag.offsetLeft, origY = elementToDrag.offsetTop; var deltaX = startX - origX, deltaY = startY - origY; if (document.addEventListener) { // DOM Level 2 event model document.addEventListener("mousemove", moveHandler, true); document.addEventListener("mouseup", upHandler, true); } else if (document.attachEvent) { // IE 5+ Event Model elementToDrag.setCapture( ); elementToDrag.attachEvent("onmousemove", moveHandler); elementToDrag.attachEvent("onmouseup", upHandler); elementToDrag.attachEvent("onlosecapture", upHandler); } else { // IE 4 Event Model var oldmovehandler = document.onmousemove; // used by upHandler( ) var olduphandler = document.onmouseup; document.onmousemove = moveHandler; document.onmouseup = upHandler; } if (event.stopPropagation) event.stopPropagation( ); // DOM Level 2 else event.cancelBubble = true; // IE if (event.preventDefault) event.preventDefault( ); // DOM Level 2 else event.returnValue = false; // IE function moveHandler(e) { if (!e) e = window.event; // IE Event Model elementToDrag.style.left = (e.clientX - deltaX) + "px"; elementToDrag.style.top = (e.clientY - deltaY) + "px"; if (e.stopPropagation) e.stopPropagation( ); // DOM Level 2 else e.cancelBubble = true; // IE } function upHandler(e) { if (!e) e = window.event; // IE Event Model if (document.removeEventListener) { // DOM event model document.removeEventListener("mouseup", upHandler, true); document.removeEventListener("mousemove", moveHandler, true); } else if (document.detachEvent) { // IE 5+ Event Model elementToDrag.detachEvent("onlosecapture", upHandler); elementToDrag.detachEvent("onmouseup", upHandler); elementToDrag.detachEvent("onmousemove", moveHandler); elementToDrag.releaseCapture( ); } else { // IE 4 Event Model document.onmouseup = olduphandler; document.onmousemove = oldmovehandler; } if (e.stopPropagation) e.stopPropagation( ); // DOM Level 2 else e.cancelBubble = true; // IE } }
以上的代码都挺简单了,都是js的一些位置和事件的相关方法,具体的方法说明请参照js总结笔记的相关文章。注意的是浏览器的兼容性的写法。以上代码在另一篇关于浮动层的博客文章里有用到。