首页 >> 下载中心 >> JavaScript源码 >> EDrag 拖曳层类 v1.0 js源码下载

EDrag 拖曳层类 v1.0 js源码下载

作者:eays 来源:经典论坛时间:2008-10-9 网友评论条【大中小】

已更新，加入onReady函数。

简单应用实例：
var dropArea = ["wrap","wrap2"];

EDrag.proxy("drag1","h1",["wrap"]);
EDrag.proxy("drag2","h1",dropArea);
EDrag.proxy("drag3","h1",dropArea);
EDrag.proxy("drag4","h1",dropArea);

EDrag.proxy("drag5","h1",["wrap2"]);
EDrag.proxy("drag6","h1",dropArea);
EDrag.proxy("drag7","h1",dropArea);
EDrag.proxy("drag8","h1",dropArea);

EF.onReady(function(){EDrag.init();});

运行代码，里面有更多说明，还请大家多提点意见。献丑了。感觉主要是易用

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>无标题文档</title> <style type="text/css"> body{ margin:auto; font-size:12px; } .normal { width: 300px; margin:13px auto 13px auto; min-height: 200px; padding: 2px; border: 1px solid #666666; background: #FFFFFF; } .normal h1 { width: 300px; height: 25px; margin: 0px; line-height: 25px; font-size: 14px; background-color: #CCC; } </style> <script type="text/javascript"> /** * eDrag 层拖曳javascript类 * eDrag.proxy("拖曳层","标题","可以扔下的容器"); * eDrag.init(); * * * @author Eays * @version 1.1 */ var EDrag = _EDrag = { wraps: [], titles: [], target: [], document: document.documentElement || document.body, initialPosition: {x:0 ,y:0}, dragArea: null, dragAreaCopy: null, dragParent: null, mouseOffset: 0, dragAreaId: null, releaseTarget: null, init: function() { this.style.loadStyle(); for (var i = 0 ; i < this.titles.length ; i++) { var title = EF.get(this.wraps[i] , this.titles[i]); if(!title.releaseTarget) title.releaseTarget = this.target[i]; title.onmousedown = this.down; } document.onmousemove = this.move; document.onmouseup = this.up; }, proxy : function(area , drag , target) { this.wraps.push(area); this.titles.push(drag); target = target == undefined ? null : target; this.target.push(target); }, down: function (e){ e = EF.event(e); current = e.srcElement || e.target; EDrag.dragArea = EF.get( EF.getDragArea(current) ); if(EDrag.dragArea){ //记录下拖拽对象原始位置 EDrag.initialPosition = EDrag.dragArea.position(); //创建一个原对象的影子 EDrag.hadow = EDrag.fun.createShadow(EDrag.dragArea); // 用影子替换原有对象并清空对象 EDrag.dragArea = EDrag.dragArea.parentNode.replaceChild(EDrag.hadow , EDrag.dragArea); EDrag.hadow.html(""); // 将原对象设为绝对 EDrag.dragArea.setStyle("position" , "absolute"); EDrag.dragArea.setStyle("left" , EDrag.initialPosition.x + "px"); EDrag.dragArea.setStyle("top" , EDrag.initialPosition.y + "px"); EDrag.dragAreaId = EDrag.dragArea.id; EDrag.dragAreaCopy = EDrag.dragArea.copy(); EDrag.dragArea.setStyle("filter" , "alpha(opacity=70)"); EDrag.dragArea.setStyle("opacity" , "0.7"); EDrag.dragAreaCopy.hidden(); EDrag.dragAreaCopy.setStyle("position" , "absolute"); EDrag.dragArea.setStyle("margin" , "auto"); // 添加原对象在文档未尾 EDrag.document.lastChild.appendChild(EDrag.dragArea); // 鼠标的相对位置 EDrag.mouseOffset = e.offset(EDrag.initialPosition); //保存release目标 EDrag.releaseTarget = current.releaseTarget; EDrag.move(e); } }, move: function(e) { if(!EDrag.dragArea) return false; e = EF.event(e); var position = e.offset(EDrag.mouseOffset); if(position.x >= 0 && position.x <= EDrag.document.offsetWidth - EDrag.dragArea.offsetWidth) EDrag.dragArea.setStyle("left" , position.x +"px"); if(position.y >= 0) EDrag.dragArea.setStyle("top" , position.y +"px"); //遍厉目标对象所有子节点，给出拖曳层的目标层 for(var i in EDrag.releaseTarget) { var releaseTarget = EF.get(EDrag.releaseTarget[i]); var cover = releaseTarget.getCoverElement(EDrag.dragArea); if(cover && (EDrag.dragParent.last() != cover)) { cover.parentNode.insertBefore(EDrag.hadow , cover); }else if(cover && EDrag.dragParent.last() == cover) { EDrag.dragParent.appendChild(EDrag.hadow); } } }, up: function() { if(!EDrag.hadow && !EDrag.dragArea) return false; try{ EDrag.dragArea.setStyle("position" , "static"); EDrag.dragArea.parentNode.removeChild(EDrag.dragArea); EDrag.dragAreaCopy.id = EDrag.dragAreaId; EDrag.dragAreaCopy.removeAttribute("style"); EDrag.dragAreaCopy.show(); EDrag.dragParent.replaceChild(EDrag.dragAreaCopy , EDrag.hadow); EDrag.dragAreaCopy.setStyle("position" , "static"); EDrag.init(); }catch(e){ } } } /** * 自带的移动样式 */ EDrag.style = _EDrag.prototype = { defaultTitle: { border: "1px dotted #000;", cursor: "move" }, defaultDotted: { border: "1px dotted #CCC", background: "#EEE" }, loadStyle: function() { for(var i=0 ; i < EDrag.titles.length ; i++) { var title = EF.get(EDrag.wraps[i] , EDrag.titles[i]); if(title != undefined) { title.setStyle("cursor" , EDrag.style.defaultTitle.cursor); } else { continue; } } }, setBorder: function(element){ element.setStyle("border" , EDrag.style.defaultDotted.border); }, setBackground: function(element) { element.setStyle("background" , EDrag.style.defaultDotted.background); } } EDrag.fun = EF = _EDrag.prototype = { eventExt: function(e) { e.position = function() { e = this; if(e.pageX || e.pageY){ return {x:e.pageX, y:e.pageY}; } return { x:e.clientX + document.body.scrollLeft - document.body.clientLeft, y:e.clientY + document.body.scrollTop - document.body.clientTop }; }, e.offset = function(position) { e = this; var mouse = e.position(); return {x:parseInt(mouse.x - position.x), y:parseInt(mouse.y - position.y)}; } return e; }, event: function(e) { var e = e || window.event; return EF.eventExt(e); }, getDragArea: function(current) { do{ var name = current.id || current.tagName || current.name; if(EDrag.wraps.search(name)) return EF.ext(current); }while(current = current.parentNode) }, search: function(search , array) { var flag = false; array = array || this; array.sort(function(x , y){ for (var i = 0; i < arguments.length; i++) { if(arguments[i].toString() == search) flag = true; } return -1; }); return flag; }, _get: function() { return document.getElementById(arguments[0]) || document.getElementsByTagName(arguments[0]) || document.getElementsByName(arguments[0]); }, ext: function(object) { object.setStyle = function(type , value) { eval("object.style."+type+"='"+value+"'"); } object.position = function() { return EF.position(this); } object.html = function(value) { if(value != undefined) return object.innerHTML = value; return object.innerHTML; } object.nodes = function() { var nodes = []; for(i = 0 ; i < this.childNodes.length ; i++) { var name = this.childNodes[i].toString(); if(name.indexOf("Text") == -1 && name.indexOf("HTMLCollection") == -1) { nodes.push(this.childNodes[i]); } } return nodes; } object.last = function() { var nodes = this.nodes(); return nodes[ nodes.length - 1 ]; }, object.hidden = function() { this.setStyle("display" , "none"); }, object.show = function() { this.setStyle("display" , "block"); }, object.copy = function() { return EF.get(this.cloneNode(true)); }, object.getCoverElement= function(current) { if(this.childNodes == undefined) return false; var nodes = this.nodes(); for(i = 0 ; i < nodes.length ; i++) { var target = EF.get( nodes[i] ); var name = target.toString(); current = EF.ext(current); current.position = current.position(); /** * 相对的y坐标 */ try{ var left = target.getTopArea().centerX - current.position.x; var top = target.getTopArea().centerY - current.position.y ; if((left < current.offsetWidth && left > 0 ) && (top - target.offsetWidth / 4 < current.offsetHeight && top > 0)) { EDrag.dragParent = this; return target; }else if((left < current.offsetWidth && left > 0 ) && (top < 0 && top >= 0 - target.offsetHeight / 6)) { EDrag.dragParent = this; return target; } } catch(e){ } } return false; } object.getTopArea = EF.getTopArea; return object; }, get: function(element , sonElement) { var type = typeof element; if (type.indexOf("object") != -1) { this.object = element; this.ext(this.object); return this.object; } if (arguments.length > 1) { if (this._get(element).length == undefined) { this.object = this._get(element).getElementsByTagName(sonElement)[0]; this.ext(this.object); return this.object; } else { this.object = this._get(element)[0].getElementsByTagName(sonElement)[0]; this.ext(this.object); return this.object; } } this.object = this._get(element) || this._get(element)[0]; this.ext(this.object); return this.object; }, position: function(e) { var p = {x:0 , y:0}; while (e.offsetParent) { p.x += e.offsetLeft; p.y += e.offsetTop; e = e.offsetParent; } if (p.x != "" && p.y != "") { return p; } }, createBox: function() { var box = document.createElement("div"); document.documentElement.lastChild.appendChild(box); return EF.get(box); }, createShadow: function(current) { if (oldShadow = document.getElementById("EDragShadow")) { oldShadow.parentNode.removeChild(oldShadow); } current = EF.get(current); var shadow = current.copy(); shadow = EF.get(shadow); shadow.id = "EDragShadow"; shadow.setStyle("width" , current.offsetWidth - 6 + "px"); shadow.setStyle("height" , current.offsetHeight - 6 + "px"); EDrag.style.setBorder(shadow); EDrag.style.setBackground(shadow); return shadow; }, /** * 获取单个对象顶部区域,x,y轴中心点 * @param {Object} element */ getTopArea: function(element) { try{ element = element || this; element = EF.get(element); /** * 对象左边、顶部坐标 */ var position = element.position(); /** * 对象的宽和高度 */ var offset = {x:element.offsetWidth , y:element.offsetHeight}; /** * x轴中心点 */ element.centerX = parseInt(position.x + offset.x / 2); element.centerY = parseInt(position.y + offset.y / 2); return element; }catch(e){} }, isGecko: function() { return navigator.userAgent.indexOf("Gecko") == -1 ? false :true; }, isOpera: function() { return navigator.userAgent.indexOf("Opera") == -1 ? false :true; }, isIE: function() { return document.all ? true : false; }, onReady: function(newFunction) { if(newFunction == undefined) return false; this.domReady = false; if(functions == undefined) var functions = []; functions.push(newFunction); var initial = function() { for(var i in functions) { functions[i](); } } this.ready = function() { if(this.domReady) initial(); if (EF.isGecko() || EF.isOpera()) { try { document.removeEventListener('DOMContentLoaded', initial); }catch(e){} document.addEventListener('DOMContentLoaded', initial, false); this.domReady = true; } else if (EF.isIE()) { var timer = window.setInterval(function() { try { document.body.doScroll("left"); initial(); window.clearInterval(timer); this.domReady = true; } catch (e) {} } , 5); } } this.ready(); } } Array.prototype.search = EDrag.fun.search; var dropArea = ["wrap","wrap2"]; EDrag.proxy("drag1","h1",["wrap"]); EDrag.proxy("drag2","h1",dropArea); EDrag.proxy("drag3","h1",dropArea); EDrag.proxy("drag4","h1",dropArea); EDrag.proxy("drag5","h1",["wrap2"]); EDrag.proxy("drag6","h1",dropArea); EDrag.proxy("drag7","h1",dropArea); EDrag.proxy("drag8","h1",dropArea); EF.onReady(function(){EDrag.init();}); </script> </head> <body> <table width="778" border="0" cellspacing="0" cellpadding="0"> <tr> <td valign="top"> <div id="wrap"> <div class="normal" id="drag1"> <h1>我不可以拖到右边</h1> <p> 设置拖放对象以限制拖放区域 </p> <p> 例：EDrag.proxy( wrap , title , releaseTarget ); </p> <p> releaseTarget 为拖放区域的id,tagName,name数组 </p> </div> <div class="normal" id="drag2"> <h1>拖放对象说明</h1> <p id="msg4"> 拖放对象继承原对象的所有css特性 </p> <p> 但似乎对float无效，比要的时候可以外加一个table </p> <p> 继承对象保证拖放后的对象和别原对象的一致性 </p> </div> <div class="normal" id="drag3"> <h1>将一个层交给eDarg代理</h1> <p> EDrag.proxy( wrap , title , releaseTarget ); </p> <p> wrap 为可以拖动的层，推荐使用ID </p> <p> title 标题，为鼠标放在上面可以拖动的对象,推荐使用tagName ,releaseTarget上面有说明 </p> </div> <div class="normal" id="drag4"> <h1>初始化EDrag拖曳</h1> <p> EDrag.init(); </p> <p> 说明：init() 需要在proxy()方法后面调用 </p> <p> 这样的结构应该非常易用 </p> </div> </div> </td> <td valign="top"> <div id="wrap2"> <div class="normal" id="drag5"> <h1>我不可以拖到左边</h1> <p> 附带函数对象 EDrag.fun 简写EF </p> <p> EF.get();可以支持两个参数,一个参数也可以 </p> <p> 如：EF.get("wrap" , "h1"); 表示在wrap元素内部的h1元素 </p> </div> <div class="normal" id="drag6"> <h1>EF.get函数说明</h1> <p> 凡是通过EF.get()函数获得的对象都是经过dom扩展的 </p> <p> 具有一些基本的扩展功能 </p> <p> 例如：EF.get("wrap").html("demo"); EF.get("wrap").setStyle("margin" , "auto"); </p> </div> <div class="normal" id="drag7"> <h1>优势</h1> <p> 拖曳后的节点上的对象和原对象完全相同，不会影响原排版 </p> <p> 其它的没什么了，只是感觉比较易用 </p> <p> </p> </div> <div class="normal" id="drag8"> <h1>新加入onReady函数</h1> <p> onReady类似jquery的ready ，使用onReady的优势在于可以在DOM加载完后运行多个函数，而已运行速度比window.onload快得多 </p> <p id="msg"> </p> <p> </p> </div> </div> </td> </tr> </table> </body> </html> [提示：你可先修改部分代码，再按运行]

by 小秦：提出一个Bug

拖动那个我不可以拖动到右边的那个层.然后把它拖动窗口.这个时候,释放鼠标左键..
然后再将鼠标移到网页中,点一下左键...

会有很有趣的现象...
如果你要其他的层上面点左键的话,,那么这个被拖动的层,将会变的不可以再拖动.
而如果是在网页的空白处点..那这个被拖动的层,会消失...

记得拖出窗口的时候..要向窗口下面拖动...左上,左,右脚本好像做的有限制.层不会跟着出去..而向下则会出去...

针对小秦提出的问题。简单的处理一下：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>无标题文档</title> <style type="text/css"> body{ margin:auto; font-size:12px; } .normal { width: 300px; margin:13px auto 13px auto; min-height: 200px; padding: 2px; border: 1px solid #666666; background: #FFFFFF; } .normal h1 { width: 300px; height: 25px; margin: 0px; line-height: 25px; font-size: 14px; background-color: #CCC; } </style> <script type="text/javascript"> /** * eDrag 层拖曳javascript类 * eDrag.proxy("拖曳层","标题","可以扔下的容器"); * eDrag.init(); * * * @author Eays * @version 1.0 */ var EDrag = _EDrag = { wraps: [], titles: [], target: [], document: document.documentElement || document.body, initialPosition: {x:0 ,y:0}, dragArea: null, shadow: null, dragAreaCopy: null, dragParent: null, mouseOffset: 0, dragAreaId: null, releaseTarget: null, init: function() { this.style.loadStyle(); for (var i = 0 ; i < this.titles.length ; i++) { var title = EF.get(this.wraps[i] , this.titles[i]); if(!title.releaseTarget) title.releaseTarget = this.target[i]; title.onmousedown = this.down; } document.onmousemove = this.move; document.onmouseup = this.up; }, proxy : function(area , drag , target) { this.wraps.push(area); this.titles.push(drag); target = target == undefined ? null : target; this.target.push(target); }, down: function (e){ if(EDrag.shadow) EDrag.up(); e = EF.event(e); current = e.srcElement || e.target; EDrag.dragArea = EF.get( EF.getDragArea(current) ); if(EDrag.dragArea){ //记录下拖拽对象原始位置 EDrag.initialPosition = EDrag.dragArea.position(); //创建一个原对象的影子 EDrag.shadow = EDrag.fun.createShadow(EDrag.dragArea); // 用影子替换原有对象并清空对象 EDrag.dragArea = EDrag.dragArea.parentNode.replaceChild(EDrag.shadow , EDrag.dragArea); EDrag.shadow.html(""); // 将原对象设为绝对 EDrag.dragArea.setStyle("position" , "absolute"); EDrag.dragArea.setStyle("zIndex" , "100"); EDrag.dragArea.setStyle("left" , EDrag.initialPosition.x + "px"); EDrag.dragArea.setStyle("top" , EDrag.initialPosition.y + "px"); EDrag.dragAreaId = EDrag.dragArea.id; EDrag.dragAreaCopy = EDrag.dragArea.copy(); EDrag.dragArea.setStyle("filter" , "alpha(opacity=70)"); EDrag.dragArea.setStyle("opacity" , "0.7"); EDrag.dragAreaCopy.hidden(); EDrag.dragAreaCopy.setStyle("position" , "absolute"); EDrag.dragArea.setStyle("margin" , "auto"); // 添加原对象在文档未尾 EDrag.document.lastChild.appendChild(EDrag.dragArea); // 鼠标的相对位置 EDrag.mouseOffset = e.offset(EDrag.initialPosition); //保存release目标 EDrag.releaseTarget = current.releaseTarget; EDrag.move(e); } }, move: function(e) { if(!EDrag.dragArea) return false; e = EF.event(e); var position = e.offset(EDrag.mouseOffset); if(position.x >= 0 && position.x <= EDrag.document.offsetWidth - EDrag.dragArea.offsetWidth) EDrag.dragArea.setStyle("left" , position.x +"px"); if(position.y >= 0) EDrag.dragArea.setStyle("top" , position.y +"px"); //遍厉目标对象所有子节点，给出拖曳层的目标层 for(var i in EDrag.releaseTarget) { var releaseTarget = EF.get(EDrag.releaseTarget[i]); var cover = releaseTarget.getCoverElement(EDrag.dragArea); if(cover && (EDrag.dragParent.last() != cover)) { cover.parentNode.insertBefore(EDrag.shadow , cover); }else if(cover && EDrag.dragParent.last() == cover) { EDrag.dragParent.appendChild(EDrag.shadow); } } }, up: function() { if(!EDrag.shadow && !EDrag.dragArea) return false; EDrag.dragArea.setStyle("zIndex" , "0"); try{ EDrag.dragArea.setStyle("position" , "static"); EDrag.dragArea.parentNode.removeChild(EDrag.dragArea); EDrag.dragAreaCopy.id = EDrag.dragAreaId; EDrag.dragAreaCopy.removeAttribute("style"); EDrag.dragAreaCopy.show(); EDrag.dragParent.replaceChild(EDrag.dragAreaCopy , EDrag.shadow); EDrag.shadow = null; EDrag.dragAreaCopy.setStyle("position" , "static"); EDrag.init(); }catch(e){ } } } /** * 自带的移动样式 */ EDrag.style = _EDrag.prototype = { defaultTitle: { border: "1px dotted #000;", cursor: "move" }, defaultDotted: { border: "1px dotted #CCC", background: "#EEE" }, loadStyle: function() { for(var i=0 ; i < EDrag.titles.length ; i++) { var title = EF.get(EDrag.wraps[i] , EDrag.titles[i]); if(title != undefined) { title.setStyle("cursor" , EDrag.style.defaultTitle.cursor); } else { continue; } } }, setBorder: function(element){ element.setStyle("border" , EDrag.style.defaultDotted.border); }, setBackground: function(element) { element.setStyle("background" , EDrag.style.defaultDotted.background); } } EDrag.fun = EF = _EDrag.prototype = { eventExt: function(e) { e.position = function() { e = this; if(e.pageX || e.pageY){ return {x:e.pageX, y:e.pageY}; } return { x:e.clientX + document.body.scrollLeft - document.body.clientLeft, y:e.clientY + document.body.scrollTop - document.body.clientTop }; }, e.offset = function(position) { e = this; var mouse = e.position(); return {x:parseInt(mouse.x - position.x), y:parseInt(mouse.y - position.y)}; } return e; }, event: function(e) { var e = e || window.event; return EF.eventExt(e); }, getDragArea: function(current) { do{ var name = current.id || current.tagName || current.name; if(EDrag.wraps.search(name)) return EF.ext(current); }while(current = current.parentNode) }, search: function(search , array) { var flag = false; array = array || this; array.sort(function(x , y){ for (var i = 0; i < arguments.length; i++) { if(arguments[i].toString() == search) flag = true; } return -1; }); return flag; }, _get: function() { return document.getElementById(arguments[0]) || document.getElementsByTagName(arguments[0]) || document.getElementsByName(arguments[0]); }, ext: function(object) { object.setStyle = function(type , value) { eval("object.style."+type+"='"+value+"'"); } object.position = function() { return EF.position(this); } object.html = function(value) { if(value != undefined) return object.innerHTML = value; return object.innerHTML; } object.nodes = function() { var nodes = []; for(i = 0 ; i < this.childNodes.length ; i++) { var name = this.childNodes[i].toString(); if(name.indexOf("Text") == -1 && name.indexOf("HTMLCollection") == -1) { nodes.push(this.childNodes[i]); } } return nodes; } object.last = function() { var nodes = this.nodes(); return nodes[ nodes.length - 1 ]; }, object.hidden = function() { this.setStyle("display" , "none"); }, object.show = function() { this.setStyle("display" , "block"); }, object.copy = function() { return EF.get(this.cloneNode(true)); }, object.getCoverElement= function(current) { if(this.childNodes == undefined) return false; var nodes = this.nodes(); for(i = 0 ; i < nodes.length ; i++) { var target = EF.get( nodes[i] ); var name = target.toString(); current = EF.ext(current); current.position = current.position(); /** * 相对的y坐标 */ try{ var left = target.getTopArea().centerX - current.position.x; var top = target.getTopArea().centerY - current.position.y ; if((left < current.offsetWidth && left > 0 ) && (top - target.offsetWidth / 4 < current.offsetHeight && top > 0)) { EDrag.dragParent = this; return target; }else if((left < current.offsetWidth && left > 0 ) && (top < 0 && top >= 0 - target.offsetHeight / 6)) { EDrag.dragParent = this; return target; } } catch(e){ } } return false; } object.getTopArea = EF.getTopArea; return object; }, get: function(element , sonElement) { var type = typeof element; if (type.indexOf("object") != -1) { this.object = element; this.ext(this.object); return this.object; } if (arguments.length > 1) { if (this._get(element).length == undefined) { this.object = this._get(element).getElementsByTagName(sonElement)[0]; this.ext(this.object); return this.object; } else { this.object = this._get(element)[0].getElementsByTagName(sonElement)[0]; this.ext(this.object); return this.object; } } this.object = this._get(element) || this._get(element)[0]; this.ext(this.object); return this.object; }, position: function(e) { var p = {x:0 , y:0}; while (e.offsetParent) { p.x += e.offsetLeft; p.y += e.offsetTop; e = e.offsetParent; } if (p.x != "" && p.y != "") { return p; } }, createBox: function() { var box = document.createElement("div"); document.documentElement.lastChild.appendChild(box); return EF.get(box); }, createShadow: function(current) { if (oldShadow = document.getElementById("EDragShadow")) { oldShadow.parentNode.removeChild(oldShadow); } current = EF.get(current); var shadow = current.copy(); shadow = EF.get(shadow); shadow.id = "EDragShadow"; shadow.setStyle("width" , current.offsetWidth - 6 + "px"); shadow.setStyle("height" , current.offsetHeight - 6 + "px"); EDrag.style.setBorder(shadow); EDrag.style.setBackground(shadow); return shadow; }, /** * 获取单个对象顶部区域,x,y轴中心点 * @param {Object} element */ getTopArea: function(element) { try{ element = element || this; element = EF.get(element); /** * 对象左边、顶部坐标 */ var position = element.position(); /** * 对象的宽和高度 */ var offset = {x:element.offsetWidth , y:element.offsetHeight}; /** * x轴中心点 */ element.centerX = parseInt(position.x + offset.x / 2); element.centerY = parseInt(position.y + offset.y / 2); return element; }catch(e){} }, isGecko: function() { return navigator.userAgent.indexOf("Gecko") == -1 ? false :true; }, isOpera: function() { return navigator.userAgent.indexOf("Opera") == -1 ? false :true; }, isIE: function() { return document.all ? true : false; }, onReady: function(newFunction) { if(newFunction == undefined) return false; this.domReady = false; if(functions == undefined) var functions = []; functions.push(newFunction); var initial = function() { for(var i in functions) { functions[i](); } } this.ready = function() { if(this.domReady) initial(); if (EF.isGecko() || EF.isOpera()) { try { document.removeEventListener('DOMContentLoaded', initial); }catch(e){} document.addEventListener('DOMContentLoaded', initial, false); this.domReady = true; } else if (EF.isIE()) { var timer = window.setInterval(function() { try { document.body.doScroll("left"); initial(); window.clearInterval(timer); this.domReady = true; } catch (e) {} } , 5); } } this.ready(); } } Array.prototype.search = EDrag.fun.search; var dropArea = ["wrap","wrap2"]; EDrag.proxy("drag1","h1",["wrap"]); EDrag.proxy("drag2","h1",dropArea); EDrag.proxy("drag3","h1",dropArea); EDrag.proxy("drag4","h1",dropArea); EDrag.proxy("drag5","h1",["wrap2"]); EDrag.proxy("drag6","h1",dropArea); EDrag.proxy("drag7","h1",dropArea); EDrag.proxy("drag8","h1",dropArea); EF.onReady(function(){EDrag.init();}); </script> </head> <body> <table width="778" border="0" cellspacing="0" cellpadding="0"> <tr> <td valign="top"> <div id="wrap"> <div class="normal" id="drag1"> <h1>我不可以拖到右边</h1> <p> 设置拖放对象以限制拖放区域 </p> <p> 例：EDrag.proxy( wrap , title , releaseTarget ); </p> <p> releaseTarget 为拖放区域的id,tagName,name数组 </p> </div> <div class="normal" id="drag2"> <h1>拖放对象说明</h1> <p id="msg4"> 拖放对象继承原对象的所有css特性 </p> <p> 但似乎对float无效，比要的时候可以外加一个table </p> <p> 继承对象保证拖放后的对象和别原对象的一致性 </p> </div> <div class="normal" id="drag3"> <h1>将一个层交给eDarg代理</h1> <p> EDrag.proxy( wrap , title , releaseTarget ); </p> <p> wrap 为可以拖动的层，推荐使用ID </p> <p> title 标题，为鼠标放在上面可以拖动的对象,推荐使用tagName ,releaseTarget上面有说明 </p> </div> <div class="normal" id="drag4"> <h1>初始化EDrag拖曳</h1> <p> EDrag.init(); </p> <p> 说明：init() 需要在proxy()方法后面调用 </p> <p> 这样的结构应该非常易用 </p> </div> </div> </td> <td valign="top"> <div id="wrap2"> <div class="normal" id="drag5"> <h1>我不可以拖到左边</h1> <p> 附带函数对象 EDrag.fun 简写EF </p> <p> EF.get();可以支持两个参数,一个参数也可以 </p> <p> 如：EF.get("wrap" , "h1"); 表示在wrap元素内部的h1元素 </p> </div> <div class="normal" id="drag6"> <h1>EF.get函数说明</h1> <p> 凡是通过EF.get()函数获得的对象都是经过dom扩展的 </p> <p> 具有一些基本的扩展功能 </p> <p> 例如：EF.get("wrap").html("demo"); EF.get("wrap").setStyle("margin" , "auto"); </p> </div> <div class="normal" id="drag7"> <h1>优势</h1> <p> 拖曳后的节点上的对象和原对象完全相同，不会影响原排版 </p> <p> 其它的没什么了，只是感觉比较易用 </p> <p> </p> </div> <div class="normal" id="drag8"> <h1>新加入onReady函数</h1> <p> onReady类似jquery的ready ，使用onReady的优势在于可以在DOM加载完后运行多个函数，而已运行速度比window.onload快得多 </p> <p id="msg"> </p> <p> </p> </div> </div> </td> </tr> </table> </body> </html> [提示：你可先修改部分代码，再按运行]

【加入收藏】【报告错误】【投递文章】【复制地址】【返回顶部↑】

本文地址：http://www.aspxhome.com/download/javascript/200810/48849.htm

站长工具

请稍等，评论加载中...

热门点击排行今日点击排行本周点击排行本月点击排行最新访问排行热门评论排行

首页 - 关于站点 - 联系站长 - 免责声明 - 版权隐私 - 网站地图 - 友情链接 - 广告服务 - Top

学习Asp到中国Asp之家（Aspxhome.com）

闽ICP备06017341号