查看文章 |
[原创 js]自定义元素位置和大小
2009-10-22 18:21
用YUI2做的一个小demo，实现了元素的drag和resize功能，自定义添加或减少元素，还可以将元素的位置，长宽等信息打印出来。 演示地址：www.adanghome.com/js_demo/1/ 代码如下： ========================================================== <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title> 阿当制作</title> <link type="text/css" rel="stylesheet" href="http://assets.taobaocdn.com/app/tbs/css/public_1_0_0.css" /> <link type="text/css" rel="Stylesheet" href="http://assets.taobaocdn.com/app/tbs/css/jf_express_1_0_0.css" /> <style type="text/css"> #wrapper{width:950px;margin:50px auto;} #previewBox{float:left;display:inline;border:2px solid #666;width:750px;position:relative;height:420px;} /*#previewBox .leftApp{filter:alpha(opacity=70); opacity: .7;}*/ #inputsWrapper{float:right;display:inline;width:140px;padding:10px;border:2px solid #e0e0de} #inputsBox span,.leftApp{display:block;margin-top:5px;background:#f2f9ff;border:2px solid #98d6fd;height:22px;line-height:22px;text-align:center;color:#000;cursor:move;font-size:14px;} p.leftApp,span.leftApp,div.leftApp{position:absolute;margin:0;width:136px;left:0;top:0} .leftApp_closeBtn{position:absolute;right:15px;top:5px;cursor:pointer;} #infoBox{padding:10px;margin-top:10px;border:3px solid #ccc;} </style> </head> <body class="yui-skin-sam"> <div id="wrapper"> <div id="previewBox"><p class="leftApp" style="width:200px;height:100px;left:50px;top:30px;" myname="a">发件人姓名</p><p class="leftApp" myname="b">发件人地址</p></div> <div id="inputsWrapper"> <h2 class="fb f14 pb10">打印项 <img src="http://assets.taobaocdn.com/app/tbs/img/jf_tip.gif" title="拖动您需要打印的内容项放置到左侧模板中适合的位置。" class="vm" /></h2> <p id="inputsBox"> <span myname="a">发件人姓名</span> <span myname="b">发件人电话</span> <span myname="c">发件人公司</span> <span myname="d">发件人地址</span> <span myname="e">发件人邮编</span> <span myname="f">收件人姓名</span> <span myname="g">收件人电话</span> <span myname="h">收件人地址</span> <span myname="i">收件人邮编</span> <span myname="j">货物清单</span> <span myname="k">发货单号</span> <span myname="l">自定义项</span> </p> </div> <p class="pt20 tc cb"><input type="button" value="显示模块信息" id="btn" /><p> <p id="infoBox"></p> </div> <script type="text/javascript" src="http://assets.taobaocdn.com/yui/2.7.0/build/yuiloader/yuiloader-min.js"></script> <script type="text/javascript"> var loader = new YAHOO.util.YUILoader({base:"http://assets.taobaocdn.com/yui/2.7.0/build/"}); loader.require(['dom', 'event', 'dragdrop','resize','animation']); function init(){ var Y=YAHOO.lang,YE = YAHOO.util.Event,YD = YAHOO.util.Dom,YDC=YD.getElementsByClassName,YUC = YAHOO.util.Connect,JSON = YAHOO.lang.JSON,YR = YAHOO.util.Resize; var CONFIG = { leftAppContainer : "previewBox", rightAppContainer : "inputsBox", leftApp : "leftApp" }; YAHOO.namespace("express"); //==================== // LeftApp类 //==================== YAHOO.express.LeftApp = function(id, config) { this.manager = YD.get(config.manager); this.el = YD.get(id); this.el.mytext = this.el.innerHTML; YAHOO.express.LeftApp.superclass.constructor.call(this, id, config); YE.on(this.el,"click",function(){ this.manager.maxAdd(); YD.setStyle(this.el,"zIndex",this.manager.max); },null,this); this.Init(); }; YAHOO.extend(YAHOO.express.LeftApp, YR, { Init : function(){ this.addCloseBtn(); }, addCloseBtn : function(){ var closeBtn = document.createElement("img"); closeBtn.src = "http://assets.taobaocdn.com/app/tbs/img/btn_del.gif"; closeBtn.className="leftApp_closeBtn"; this.el.appendChild(closeBtn); YE.on(closeBtn,"click",function(){ this.el.parentNode.removeChild(this.el); },null,this); } }); //===================== // LeftApp管理对象 //===================== YAHOO.express.LeftAppManager = { max:10, init : function(){ var leftAppEls = YDC("leftApp","*","previewBox"); for(var i=0,n=leftAppEls.length;i<n;i++){ this.addMod(leftAppEls[i]); } }, addMod : function(el){ new YAHOO.express.LeftApp(el,{ handles: 'all', knobHandles: true, hover:true, proxy: true, draggable: true, manager:this }); }, maxAdd : function(){ this.max++; }, getAppsInfo : function(imgInfo){ var leftAppEls = YDC("leftApp","*","previewBox") , wid = 750 , hei = 420 , info = [] , node; for(var i=0,n=leftAppEls.length;i<n;i++){ node = leftAppEls[i]; info.push('{"width":"'+ Math.round((node.offsetWidth - 4)*100/wid) + '%","height":"' + Math.round((node.offsetHeight - 4)*100/hei) + '%","left":"' + (/%$/.test(YD.getStyle(node,"left")) ? YD.getStyle(node,"left") : Math.round(parseInt(YD.getStyle(node,"left"),10)*100/wid) + '%') + '","top":"' + (/%$/.test(YD.getStyle(node,"top")) ? YD.getStyle(node,"top") : Math.round(parseInt(YD.getStyle(node,"top"),10)*100/hei) + '%') + '","name":"'+ (node.myname ? node.myname : node.getAttribute("myname"))+'","text":"'+(node.mytext ? node.mytext : node.getAttribute("mytext"))+'"}'); } info = info.join(","); info = "[" + info + "]"; return info; } } //==================== // RightApp类 //==================== YAHOO.express.RightApp = function(id, sGroup, config) { YAHOO.express.RightApp.superclass.constructor.call(this, id, sGroup, config); var el = this.getDragEl(); YD.setStyle(el, "opacity", 0.67); }; YAHOO.extend(YAHOO.express.RightApp, YAHOO.util.DDProxy, { startDrag: function(x, y) { var dragEl = this.getDragEl(); var clickEl = this.getEl(); YD.setStyle(clickEl, "visibility", "hidden"); dragEl.innerHTML = clickEl.innerHTML; YD.setStyle(dragEl, "color", YD.getStyle(clickEl, "color")); YD.setStyle(dragEl, "backgroundColor", YD.getStyle(clickEl, "backgroundColor")); YD.setStyle(dragEl, "fontSize", YD.getStyle(clickEl, "fontSize")); YD.setStyle(dragEl, "lineHeight", YD.getStyle(clickEl, "lineHeight")); YD.setStyle(dragEl, "textAlign", YD.getStyle(clickEl, "textAlign")); YD.setStyle(dragEl, "border", "2px solid #98D6FD"); }, endDrag: function(e) { var srcEl = this.getEl(); var proxy = this.getDragEl(); YD.setStyle(proxy, "visibility", ""); if(YD.getRegion(CONFIG.leftAppContainer).contains(YD.getRegion(proxy))){ var newNode = document.createElement("p"); newNode.innerHTML = srcEl.innerHTML; newNode.myname = srcEl.getAttribute("myname"); YD.get(CONFIG.leftAppContainer).appendChild(newNode); YD.addClass(newNode,CONFIG.leftApp); YD.setXY(newNode,YD.getXY(proxy)); YAHOO.express.LeftAppManager.addMod(newNode); YD.setStyle(proxy, "visibility", "hidden"); YD.setStyle(srcEl, "visibility", ""); } else { var a = new YAHOO.util.Motion( proxy, { points: { to: YD.getXY(srcEl) } }, 0.2, YAHOO.util.Easing.easeOut ) a.onComplete.subscribe(function() { YD.setStyle(proxy, "visibility", "hidden"); YD.setStyle(srcEl, "visibility", ""); }); a.animate(); } } }); //===================== // RightApp管理对象 //===================== YAHOO.express.RightAppManager = { init : function(){ var rightAppEls = YD.get(CONFIG.rightAppContainer).getElementsByTagName("span"); for(var i=0,n=rightAppEls.length;i<n;i++){ new YAHOO.express.RightApp(rightAppEls[i],"right"); } } } //================== // 程序初始化 //================== function init(){ YAHOO.express.LeftAppManager.init(); YAHOO.express.RightAppManager.init(); YE.on("btn","click",function(){ YD.get("infoBox").innerHTML = YAHOO.express.LeftAppManager.getAppsInfo(); }); }; init(); } </script> <script type="text/javascript"> if(typeof init == "function"){ loader.onSuccess = init; } loader.insert(); </script> </body> </html> |
最近读者：
