www.gusucode.com > 以前收藏的Ajax网页DIV拖动自动排列特效代码源码程序 > 以前收藏的Ajax网页DIV拖动自动排列特效代码/DragPage/DragPage/JKDrag.js
//Download by http://www.srcfans.com function JKDrag_CPos(x, y) { this.x = x; this.y = y; } function JKDrag_CPos_GetObjPos(ATarget) { var target = ATarget; var pos = new JKDrag_CPos(target.offsetLeft, target.offsetTop); var target = target.parentElement; while (target) { pos.x += target.offsetLeft; pos.y += target.offsetTop; target = target.parentElement } return pos; } //objStr 当前对象的名称,字符串类型。 //targetStr 被拖拽的物件的 id 字符串,比如 VC++ 中的窗口。 //controllerStr 用于响应拖拽的物件的 id 字符串,比如 VC++ 中的窗口标题。 //targetStr 和 controllerStr 也可以是同一个物件。 function JKDrag(objStr, targetStr, controllerStr) { this.objStr = objStr; this.target = document.getElementById(targetStr); this.controller = document.getElementById(controllerStr); this.draging = false; //是否处于拖拽中 this.offsetX = 0; //X方向左右偏移量,鼠标按下时鼠标与 targetStr 左端的距离。 this.offsetY = 0; //Y方向上下偏移量,鼠标按下时鼠标与 targetStr 上端的距离。 this.Bind = JKDrag_Bind; //为物价绑定拖拽功能 this.BeforeDrag = JKDrag_BeforeDrag; //开始拖拽 this.OnDrag = JKDrag_OnDrag; //拖拽中 this.EndDrag = JKDrag_EndDrag; //结束拖拽 this.TranslateButton = JKDrag_TranslateButton; //不同的浏览器有不同的鼠标按钮值,此函数将鼠标事件的按钮值统一。 this.FilterNull = JKDrag_FilterNull; //过滤 null,如果 v 为 null,则返回零长度字符串。 this.Bind(); } //为物件绑定拖拽功能 function JKDrag_Bind() { //准备样式数据 if (!this.target.style.position) { this.target.style.position = "absolute"; } var pos = JKDrag_CPos_GetObjPos(this.target); if (!this.target.style.left) { this.target.style.left = pos.x + "px"; } if (!this.target.style.top) { this.target.style.top = pos.y + "px"; } this.controller.style.cursor = "move"; //准备事件数据 var eventDownStr = this.objStr + ".BeforeDrag();"; var eventMoveStr = this.objStr + ".OnDrag();"; var eventUpStr = this.objStr + ".EndDrag();"; if (window.attachEvent) { //IE this.controller.attachEvent("onmousedown", function (){eval(eventDownStr);}); document.body.attachEvent("onmousemove", function (){eval(eventMoveStr);}); //使用 document.body 不至于拖得太快时,释放鼠标时不响应 EndDrag。 document.body.attachEvent("onmouseup", function (){eval(eventUpStr);}); } else { //其它浏览器中使用的是 setAttribute 设置事件属性字符串,这就不能剥夺事件属性上原有的字符串函数 eventDownStr = this.FilterNull(this.target.getAttribute("onmousedown")) + ";" + eventDownStr; eventMoveStr = this.FilterNull(document.body.getAttribute("onmousemove")) + ";" + eventMoveStr; eventUpStr = this.FilterNull(document.body.getAttribute("onmouseup")) + ";" + eventUpStr; eventDownStr = (eventDownStr.substr(0,1)==";")?eventDownStr.substr(1,eventDownStr.length):eventDownStr; eventMoveStr = (eventMoveStr.substr(0,1)==";")?eventMoveStr.substr(1,eventMoveStr.length):eventMoveStr; eventUpStr = (eventUpStr.substr(0,1)==";")?eventUpStr.substr(1,eventUpStr.length):eventUpStr; this.controller.setAttribute("onmousedown", eventDownStr); document.body.setAttribute("onmousemove", eventMoveStr); document.body.setAttribute("onmouseup", eventUpStr); } } //开始拖拽 function JKDrag_BeforeDrag() { var theEvent = window.event || arguments.callee.caller.arguments[0]; if (this.TranslateButton(theEvent) != "l") { //不是鼠标左键 return; } this.offsetX = document.body.scrollLeft + theEvent.clientX-parseInt(this.target.style.left); this.offsetY = document.body.scrollTop + theEvent.clientY-parseInt(this.target.style.top); this.target.className = "actived"; this.draging = true; } //拖拽中 function JKDrag_OnDrag() { var theEvent = window.event || arguments.callee.caller.arguments[0]; if(!this.draging) { //不处于拖拽中 return; } //更新位置 theEvent.returnValue = false; this.target.style.left = (document.body.scrollLeft + theEvent.clientX-this.offsetX) + "px"; this.target.style.top = (document.body.scrollTop + theEvent.clientY-this.offsetY) + "px"; } //结束拖拽 function JKDrag_EndDrag() { var theEvent = window.event || arguments.callee.caller.arguments[0]; if (this.TranslateButton(theEvent) != "l") { //不是鼠标左键 return; } this.draging = false; this.target.className = "docked"; } //不同的浏览器有不同的鼠标按钮值 //此函数将鼠标事件的按钮值统一 //按下鼠标左键,返回 l //按下鼠标右键,返回 r //按下鼠标中键(滚轮),返回 m function JKDrag_TranslateButton(event) { if (window.navigator.appName.indexOf("Microsoft") >= 0) { //IE5.0、IE6.0 的 appName 均为:Microsoft Internet Explorer //腾讯TT、傲游等使用 IE 内核的浏览器,其 appName 也为:Microsoft Internet Explorer //这里不能使用 document.all 来判断,因为 Opera 也具有 document.all 属性,但其鼠标按钮值却和 FireFox 是一类的。 if (event.button == 1) { return "l"; } else if (event.button == 2) { return "r"; } else if (event.button == 4) { return "m"; } } else { if (event.button == 0) { return "l"; } else if (event.button == 2) { return "r"; } else if (event.button == 1) { return "m"; } } return ""; } //过滤 null,如果 v 为 null,则返回零长度字符串 function JKDrag_FilterNull(v) { if (v) { return v; } else { return ""; } }