JavaScript写的一个简单的可拖动效果
先看js代码
function drag(target, event){// 定义开始拖动时的鼠标位置（相对window座标）var startX = event.clientX;var startY = event.clientY;//定义将要被拖动元素的位置（相对于document座标）//因为该target的position为absolutely，所以我们认为它的基于的座标系是documentvar origX = target.offsetLeft;var origY = target.offsetTop;//因为后面根据event的clientX、clientY来获取鼠标位置时，只能获取windows座标系//的位置，所以需要计算window座标系和document座标系的偏移。//计算windows座标系和document座标系之间的偏移var deltaX = startX - origX;var deltaY = startY - origY;//为被拖动对象的鼠标移动（mousemove）和鼠标松开（mouseup）注册事件处理器if (document.addEventListener){//DOM 2事件模型//在事件捕获阶段绑定事件处理器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 2事件模型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);}//鼠标松开的事件处理器function upHandler(evt) {//对于IE事件模型，获取事件对象if (!evt) evt = window.event; //取消被拖动对象的鼠标移动（mousemove）和鼠标松开（mouseup）的事件处理器if (document.removeEventListener){//DOM 2事件模型//取消在事件捕获阶段的事件处理器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);}//阻止事件传播(该函数可以跨浏览器)function stopProp(evt){//DOM 2事件模型if (evt.stopPropagation){evt.stopPropagation( );}else {//事件模型evt.cancelBubble = true; }}}?
?
jsp代码<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%><%String path = request.getContextPath();String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";%><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><html><head><base href="<%=basePath%>"><title>拖动效果</title><meta http-equiv="pragma" content="no-cache"><meta http-equiv="cache-control" content="no-cache"><meta http-equiv="expires" content="0"><meta http-equiv="keywords" content="keyword1,keyword2,keyword3"><meta http-equiv="description" content="This is my page"><script type="text/javascript" src="js/drag.js"></script></head><body><!-- 定义被拖动的元素 --><divstyle="position: absolute; left: 120px; top: 150px; width: 250px; border: 1px solid black;"><divstyle="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></body></html>
?