用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>
<div id=”wrapper”>
<div id=”previewBox”><p style=”width:200px;height:100px;left:50px;top:30px;” myname=”a”>发件人姓名</p><p myname=”b”>发件人地址</p></div>
<div id=”inputsWrapper”>
<h2>打印项 <img src=”http://assets.taobaocdn.com/app/tbs/img/jf_tip.gif” title=”拖动您需要打印的内容项放置到左侧模板中适合的位置。” /></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><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>
