跨浏览器拖动HTML元素

来源：互联网发布：java招聘编辑：程序博客网时间：2024/06/02 04:23

一代码

HTML代码：

<!DOCTYPE html><html><head><meta name="author" content="Yeeku.H.Lee(CrazyIt.org)" /><meta http-equiv="Content-Type" content="text/html; charset=GBK" /><title> 拖放效果 </title></head><body><!-- 导入JavaScript脚本文件 --><script src="drag.js"></script><!-- 定义被拖放的元素 --><div style="position:absolute;left:120px;top:150px;width:250px; border:1px solid black;"><div style="background-color:#416ea5; width:250px;height:22px;cursor:move;font-weight:bold;border-bottom:1px solid black;"onmousedown="drag(this.parentNode, event);">可拖动标题</div><p>可被拖动的窗口</p><p>窗口内容</p></div><!-- 定义一个可拖动的图片 --><img src="image/logo.jpg" alt="按住Shift可拖动"style="position:absolute;"onmousedown="if (event.shiftKey) drag(this, event);" /></body></html>

JS代码：

var drag = function(target, event){// 定义开始拖动时的鼠标位置（相对window座标）var startX = event.clientX;var startY = event.clientY;// 定义将要被拖动元素的位置（相对于document座标）// 因为该target的position为absolutely，// 所以我们认为它的座标系是基于document的var origX = target.offsetLeft;var origY = target.offsetTop;// 因为后面根据event的clientX、clientY来获取鼠标位置时，// 只能获取windows座标系的位置，所以需要计算window座标系// 和document座标系的偏移。// 计算windows座标系和document座标系之间的偏移var deltaX = startX - origX;var deltaY = startY - origY;// 鼠标松开的事件处理器var upHandler = function(evt) {// 对于IE事件模型，获取事件对象if (!evt) evt = window.event; // 取消被拖动对象的鼠标移动（mousemove）和鼠标松开（mouseup）的事件处理器if (document.removeEventListener){// DOM事件模型// 取消在事件捕获阶段的事件处理器document.removeEventListener("mouseup", upHandler, true);document.removeEventListener("mousemove", moveHandler, true);}else if (document.detachEvent) {target.detachEvent("onlosecapture", upHandler);target.detachEvent("onmouseup", upHandler);target.detachEvent("onmousemove", moveHandler);target.releaseCapture( );}// 阻止事件传播stopProp(evt);}// 阻止事件传播(该函数可以跨浏览器)var stopProp = function(evt){// DOM事件模型if (evt.stopPropagation){evt.stopPropagation( );}// IE事件模型else{evt.cancelBubble = true;}}// 为被拖动对象的鼠标移动（mousemove）和鼠标松开（mouseup）注册事件处理器if (document.addEventListener){// DOM事件模型// 在事件捕获阶段绑定事件处理器document.addEventListener("mousemove", moveHandler, true);document.addEventListener("mouseup", upHandler, true);}else if (document.attachEvent) {// IE事件模型// 设置该元素直接捕获该事件target.setCapture();// 为该元素鼠标移动时绑定事件处理器target.attachEvent("onmousemove", moveHandler);// 为鼠标松开时绑定事件处理器target.attachEvent("onmouseup", upHandler);// 将失去捕获事件当成鼠标松开处理。target.attachEvent("onlosecapture", upHandler);}// 阻止事件传播stopProp(event);// 取消事件默认行为if (event.preventDefault){// DOM事件模型event.preventDefault( ); }else{// IE事件模型event.returnValue = false;}// 鼠标移动的事件处理器function moveHandler(evt){// 对于IE事件模型，获取事件对象if (!evt) evt = window.event; // 将被拖动元素的位置移动到当前鼠标位置。// 先将window座标系位置转换成document座标系位置，再修改目标对象的CSS位置。target.style.left = (evt.clientX - deltaX) + "px";target.style.top = (evt.clientY - deltaY) + "px";// 阻止事件传播stopProp(evt);}}

二运行结果

查看图片附件

阅读全文

0 0