<!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=utf-8" />
<title>无标题文档</title>
<style type="text/css">
html,body,div,ul,li,h1,h2,h3,h4,h5,h6,p,span{ margin:0; padding:0;-moz-user-select:none; }
body{ overflow:hidden;}
ul,li{ list-style:none;}
li{ float:left;}
#appCenter{ width:750px; margin:30px auto;}
#appCenter .appDiv{ margin-bottom:15px;_zoom:1;}
#appCenter .appDiv h3{ padding:5px; border-bottom:1px #ccc dotted;}
#appCenter ul{ overflow:hidden; margin-left:30px;}
#appCenter ul li{ width:80px; height:80px; position:relative; margin-right:20px; margin-top:20px; border:1px #fff dashed; display:inline;}
#appCenter ul li div{ height:68px; background-position:center center; background-repeat:no-repeat; cursor:move;}
#appCenter ul li p{ height:12px; line-height:12px; font-size:12px; text-align:center; }
#appCenter ul li span{ display:block; width:19px; height:19px; position:absolute; right:0; top:-2px; cursor:pointer;}
.plus{ background:url(http://d.hiphotos.bdimg.com/album/s%3D680%3Bq%3D90/sign=90c53662fd039245a5b5e207b7afd5ff/6a63f6246b600c33d44f1e671b4c510fd9f9a16f.jpg)}
.minus{ background:url(http://e.hiphotos.bdimg.com/album/s%3D680%3Bq%3D90/sign=c114b4ab960a304e5622a3f2e1f3d6bb/a1ec08fa513d269765e5c8f254fbb2fb4316d86f.jpg)}
.js-newLi{ position:absolute; opacity:0.5; filter:alpha(opacity=50); width:80px; height:80px;}
.js-newLi div{ height:68px; background-position:center center; background-repeat:no-repeat; cursor:move;}
.js-newLi p{ height:12px; line-height:12px; font-size:12px; text-align:center; }
.js-newLi span{ display:block; width:19px; height:19px; position:absolute; right:0; top:-2px; cursor:pointer;}
#appCenter ul li.js-liBorderStyle{ border:1px #ccc dashed;}
</style>
<script type="text/javascript">
//取元素
var $=function(element){
return typeof element=="string"?document.getElementById(element):element;
},_$=function(oParent,nodeName){
return oParent.getElementsByTagName(nodeName);
};
//模拟报文数据
var aMyApp=[{name:'应用1',src:'http://e.hiphotos.bdimg.com/album/s%3D680%3Bq%3D90/sign=d7deff4e63d9f2d3241127e799d7fb2e/ca1349540923dd54fa6467c7d009b3de9c82480e.jpg'},
{name:'应用2',src:'http://d.hiphotos.bdimg.com/album/s%3D680%3Bq%3D90/sign=bb9f24dcac4bd11300cdb43a6a94d532/b17eca8065380cd7e2296242a044ad345982816e.jpg'},
{name:'应用3',src:'http://b.hiphotos.bdimg.com/album/s%3D680%3Bq%3D90/sign=33e12cacc995d143de76e72b43cbf33f/b3119313b07eca80147ef948902397dda1448322.jpg'},
{name:'应用4',src:'http://b.hiphotos.bdimg.com/album/s%3D680%3Bq%3D90/sign=a8544684b151f819f5250042ea8f3bd0/9a504fc2d5628535749b128e91ef76c6a7ef6322.jpg'},
{name:'应用5',src:'http://g.hiphotos.bdimg.com/album/s%3D680%3Bq%3D90/sign=a03c2f2b4bed2e73f8e98524b73ad0b6/e61190ef76c6a7ef585d6889fcfaaf51f3de6622.jpg'},
{name:'应用6',src:'http://e.hiphotos.bdimg.com/album/s%3D680%3Bq%3D90/sign=62ed5270cf1b9d168ec79969c3e5c5b2/a8773912b31bb051ec327387377adab44aede00f.jpg'},
{name:'应用7',src:'http://c.hiphotos.bdimg.com/album/s%3D680%3Bq%3D90/sign=a03df7977af40ad111e4c4eb671760e2/5fdf8db1cb134954a36528cb574e9258d1094a22.jpg'},
{name:'应用8',src:'http://b.hiphotos.bdimg.com/album/s%3D680%3Bq%3D90/sign=9432f948902397ddd2799b0c69b9c38a/7a899e510fb30f24b3ad2cacc995d143ad4b036e.jpg'},
{name:'应用9',src:'http://b.hiphotos.bdimg.com/album/s%3D680%3Bq%3D90/sign=29a8f96b30adcbef05347d0e9c945fe0/ac4bd11373f08202a3a551904afbfbedab641b6e.jpg'}];
var aOtherApp=[{name:'应用10',src:'http://b.hiphotos.bdimg.com/album/s%3D680%3Bq%3D90/sign=f4acc34cd439b60049ce0cbfd96b4417/0ff41bd5ad6eddc4b0b8745438dbb6fd536633c6.jpg'},
{name:'应用11',src:'http://a.hiphotos.bdimg.com/album/s%3D680%3Bq%3D90/sign=e76ae440a8ec8a13101a54e8c738e0b2/574e9258d109b3de2cc424c7cdbf6c81800a4c22.jpg'},
{name:'应用12',src:'http://h.hiphotos.bdimg.com/album/s%3D680%3Bq%3D90/sign=0dbdb6896c224f4a5399701b39cce16f/a9d3fd1f4134970a8f08d08094cad1c8a7865d22.jpg'},
{name:'应用13',src:'http://h.hiphotos.bdimg.com/album/s%3D680%3Bq%3D90/sign=5f6487910df3d7ca08f63c7ec224cf34/a686c9177f3e67090e7b85503ac79f3df8dc5522.jpg'},
{name:'应用14',src:'http://h.hiphotos.bdimg.com/album/s%3D680%3Bq%3D90/sign=da6970aae4dde711e3d240fe97d4bf26/8b82b9014a90f6037c865ce83812b31bb051ed6f.jpg'},
{name:'应用15',src:'http://b.hiphotos.bdimg.com/album/s%3D680%3Bq%3D90/sign=5da0c34e2e2eb938e86d79fae559f408/eac4b74543a98226c6bbeb888b82b9014a90eb23.jpg'},
{name:'应用16',src:'http://g.hiphotos.bdimg.com/album/s%3D680%3Bq%3D90/sign=ee58cfb62cf5e0feea188a096c5b4595/8ad4b31c8701a18b9991d2e09f2f07082838fe23.jpg'},
{name:'应用17',src:'http://g.hiphotos.bdimg.com/album/s%3D680%3Bq%3D90/sign=831a87144610b912bbc1f5f6f3c68d3e/d6ca7bcb0a46f21ff0029efcf7246b600c33ae6f.jpg'},
{name:'应用18',src:'http://d.hiphotos.bdimg.com/album/s%3D680%3Bq%3D90/sign=838c8359a6efce1bee2bcbc29f6a82e3/728da9773912b31ba3320d868718367adbb4e1c7.jpg'}];
window.onload=function(){
new AppCenter('appCenter','myApp','otherApp',{
myAppList:aMyApp,
otherAppList:aOtherApp
});
}
//应用中心类
function AppCenter(){
this.init.apply(this,arguments);
}
//应用中心原型
AppCenter.prototype={
//鼠标按下时的x坐标
_downX:0,
//鼠标按下时的y坐标
_downY:0,
//鼠标移动时的x坐标
_moveX:0,
//鼠标移动时的y坐标
_moveY:0,
//移动图标的下标
_index:0,
//初始化方法
// oMainDivId-主div的id sMyAppId-我的应用UL的id sOtherAppId-其他应用UL的id
//confing{object}-配置参数{myAppList:'我的应用数据{Array}',otherAppList:'其他应用数据{Array}'}
init:function(sMainDivId,sMyAppId,sOtherAppId,confing){
this.oMainDiv=$(sMainDivId);
this.oMyApp=$(sMyAppId);
this.oOtherApp=$(sOtherAppId);
this.aMyAppList=confing.myAppList;
this.aOtherAppList=confing.otherAppList;
this._createAppCenter(this.oMyApp,this.aMyAppList,0);
this._createAppCenter(this.oOtherApp,this.aOtherAppList,1);
this._OnApp(this.oMainDiv);
this._addDeleteApp(this.oMyApp,this.oOtherApp);
this._addDeleteApp(this.oOtherApp,this.oMyApp);
this._moveApp(this.oMyApp,this.oOtherApp);
this._moveApp(this.oOtherApp,this.oMyApp);
},
//创建应用中心内容
_createAppCenter:function(oElement,aAppList,flag){
var sLiContent='',len=aAppList.length,sBtnClass='';
var aAppDivList=_$(oElement,'div'),aAppPList=_$(oElement,'p');
sBtnClass=flag==0?'minus':'plus';
for(var i=0;i<len;i++){
sLiContent+='<li><div></div><p></p><span class="'+sBtnClass+'"></span></li>';
}
oElement.innerHTML=sLiContent;
for(var j=0;j<len;j++){
var div=aAppDivList[j],p=aAppPList[j],params=aAppList[j];
div.style.backgroundImage="url("+params.src+")";
p.innerHTML=params.name;
}
},
//鼠标移入移出图标
_OnApp:function(oMainDiv){
var _this=this;
oMainDiv.onmouseover=function(event){
var e=event||window.event,t=e.target||e.srcElement;
if(t.nodeName.toLowerCase()=='li'){
_this.addClass(t,'js-liBorderStyle');
}else if(t.parentNode.nodeName.toLowerCase()=='li'){
_this.addClass(t.parentNode,'js-liBorderStyle');
}
}
oMainDiv.onmouseout=function(event){
var e=event||window.event,t=e.target||e.srcElement;
if(t.nodeName.toLowerCase()=='li'){
_this.removeClass(t,'js-liBorderStyle');
}else if(t.parentNode.nodeName.toLowerCase()=='li'){
_this.removeClass(t.parentNode,'js-liBorderStyle');
}
}
},
//拖动图标改变位置
_moveApp:function(oDragUl,oOtherUl){
var _this=this;
oDragUl.onmousedown=function(event){
var e=event||window.event,t=e.target||e.srcElement;
//class不是js-liBorderStyle的li元素集合
_this._aLiList=[];
if(t.nodeName.toLowerCase()=='div'&&t.className!='appDiv'){
var oLi=t.parentNode,oCopyLi=oLi.cloneNode(true),oNewLi1=document.createElement('li'),oSpan=_$(oCopyLi,'span')[0];
document.body.appendChild(oCopyLi);
_this.addClass(oCopyLi,'js-newLi');
oSpan.style.display="none";
oCopyLi.style.left=_this.offset(oLi).left+"px";
oCopyLi.style.top=_this.offset(oLi).top+"px";
oLi.parentNode.replaceChild(oNewLi1,oLi);
_this.addClass(oNewLi1,'js-liBorderStyle');
_this._downX=e.clientX;
_this._downY=e.clientY;
_this._offsetLeft=oCopyLi.offsetLeft;
_this._offsetTop=oCopyLi.offsetTop;
_this.aLiList=_$(_this.oMainDiv,'li');
//_this._aLiList集合
for(var i=0,len=_this.aLiList.length;i<len;i++){
var li=_this.aLiList[i];
if(li.className!='js-liBorderStyle'){
_this._aLiList.push(li);
}
}
//鼠标按下时移动图标的位置
_this._getAppLocation(_this._offsetLeft+80,_this._offsetTop+80);
document.onmousemove=function(event){
var e=event||window.event,t=e.target||e.srcElement;
var _X=e.clientX,_Y=e.clientY,_mLeft=_this._offsetLeft+_X-_this._downX,_mtop=_this._offsetTop+_Y-_this._downY;
var oSize=_this._overBorder(_mLeft,_mtop);
_mLeft=oSize.left?oSize.left:_mLeft;
_mtop=oSize.top?oSize.top:_mtop;
oCopyLi.style.left=_mLeft+"px";
oCopyLi.style.top=_mtop+"px";
var index=_this._getAppLocation(_mLeft,_mtop);
_this._insertApp(_Y,_this._aLiList[index],oNewLi1,_this.oMyApp);
_this._insertApp(_Y,_this._aLiList[index],oNewLi1,_this.oOtherApp);
}
document.onmouseup=function(event){
var e=event||window.event,t=e.target||e.srcElement,left,top,oSpan2;
left=_this.offset(oNewLi1).left;
top=_this.offset(oNewLi1).top;
_this.animate(oCopyLi,{left:left,top:top},100,function(){
document.body.removeChild(oCopyLi);
oNewLi1.innerHTML=oCopyLi.innerHTML;
oSpan2=_$(oNewLi1,'span')[0];
oSpan2.style.display="block";
_this.removeClass(oNewLi1,'js-liBorderStyle');
var oLiSpan=_$(oNewLi1,'span')[0];
var oPBtn=oNewLi1.parentNode;
oPBtn==_this.oMyApp?oLiSpan.className="minus":oLiSpan.className="plus";
});
document.onmousemove=null;
document.onmouseup=null;
}
}
}
},
//点击加减号增删图标 oDragUl-点击的加减号所在的UL元素 oAnotherUl-另一个UL元素
_addDeleteApp:function(oDragUl,oAnotherUl){
var aDelList=_$(oDragUl,'li'),oAddList=_$(oAnotherUl,'li'),_this=this;
oDragUl.onclick=function(event){
var e=event||window.event,t=e.target||e.srcElement;
if(t.nodeName.toLowerCase()=='span'){
var sBtnClass=t.className,pNode=t.parentNode,oCopyLi=oCopyLi2=pNode.cloneNode(true);
var oNewLi1=document.createElement('li'),oNewLi2=document.createElement('li');
document.body.appendChild(oCopyLi);
_this.addClass(oCopyLi,'js-newLi');
oCopyLi.style.left=_this.offset(pNode).left+"px";
oCopyLi.style.top=_this.offset(pNode).top+"px";
oDragUl.replaceChild(oNewLi1,pNode);
oAnotherUl.appendChild(oNewLi2);
_this.addClass(oNewLi1,'js-liBorderStyle');
_this.addClass(oNewLi2,'js-liBorderStyle');
_this.animate(oCopyLi,{left:_this.offset(oNewLi2).left,top:_this.offset(oNewLi2).top},150,function(){
oNewLi1.parentNode.removeChild(oNewLi1);
document.body.removeChild(oCopyLi);
oNewLi2.innerHTML=oCopyLi2.innerHTML;
_this.removeClass(oNewLi2,'js-liBorderStyle');
var oLiSpan=_$(oNewLi2,'span')[0];
sBtnClass=='plus'?oLiSpan.className="minus":oLiSpan.className="plus";
});
}
}
},
//图标超出边界处理
_overBorder:function(left,top){
var x=0,y=0,oMainDiv=this.oMainDiv,oSize={};
if(left<oMainDiv.offsetLeft){
x=oMainDiv.offsetLeft;
}
if(left>oMainDiv.offsetLeft+oMainDiv.offsetWidth){
x=oMainDiv.offsetLeft+oMainDiv.offsetWidth;
}
if(top<oMainDiv.offsetTop){
y=oMainDiv.offsetTop;
}
if(top>oMainDiv.offsetTop+oMainDiv.offsetHeight){
y=oMainDiv.offsetTop+oMainDiv.offsetHeight;
}
oSize.left=x;
oSize.top=y;
return oSize;
},
//边框随鼠标移动改变位置
_insertApp:function(y,oOldElement,oNewElement,oParent){
var aLiList=_$(oParent,'li'),oLastLi=aLiList[aLiList.length-1];
if(y>this.offset(oParent).top&&y<this.offset(oParent).top+oParent.offsetHeight){
try{
oParent.insertBefore(oNewElement,oOldElement);
}catch(error){
oParent.appendChild(oNewElement);
}
}
},
//计算移动图标所处的位置
_getAppLocation:function(x,y){
var liList=this.aLiList,liW=liList[0].offsetWidth;
for(var i=0,len=liList.length;i<len;i++){
var li=liList[i],left=this.offset(li).left,top=this.offset(li).top;
if((x>left-liW+40&&x<left+liW-40)&&y>top-liW+20&&y<top+liW-20){
this._index=i;
break;
}
}
return this._index;
},
//添加class
addClass:function(node,_className){
if(!node.className){
node.className=_className;
}else{
node.className+=" "+_className;
}
},
//删除class
removeClass:function(node,_className){
var string=node.className;
if(string.indexOf(_className)>0){
node.className=string.replace(' '+ _className,'');
}else if(string.indexOf(_className)==0){
if(string.indexOf(' ')<0){
node.className=string.replace(_className,'');
}else{
node.className=string.replace(_className+' ','');
}
}else{
return;
}
},
//动画方法 obj-动画元素 params{object}-参数{left:'',top:''} time-时间 handler-回调函数
animate:function(obj,params,time,handler){
var node=$(obj),handlerFlag=true,_style=node.currentStyle?node.currentStyle:window.getComputedStyle(node,null);
time=document.all?time*0.6:time*0.9;
for(var p in params){
(function(n){
n=p;
if(n=="left"||n=="top"){
var _old=parseInt(_style[n]),_new=parseInt(params[n]),_length=0,_tt=10;
if(!isNaN(_old)){
var count=_old,length=_old<=_new?(_new-_old):(_old-_new),speed=length/time*_tt,flag=0;
var anim=setInterval(function(){
node.style[n]=count+"px";
count=_old<=_new?count+speed:count-speed;
flag+=_tt;
if(flag>=time){
node.style[n]=_new+"px";
clearInterval(anim);
}
},_tt);
}
}
})(p);
}
var timeHandler=setTimeout(function(){
if(handler&&typeof handler=="function"){
handler();
clearTimeout(timeHandler);
}
},time+100);
},
//元素在文档中的位置
offset:function(obj){
var _offset={},node=$(obj);
var left=node.offsetLeft,top=node.offsetTop;
var parent = node.offsetParent;
while(parent!=null){
left += parent.offsetLeft;
top += parent.offsetTop;
parent = parent.offsetParent;
}
_offset.left=left;
_offset.top=top;
return _offset;
},
//获取元素样式
getStyle:function(obj,_style){
var node=$(obj);
return node.currentStyle?node.currentStyle[_style]:window.getComputedStyle(node,null)[_style];
}
}
</script>
</head>
<body onselectstart="return false">
<div id="appCenter">
<div class="appDiv">
<h3>我的应用</h3>
<ul id="myApp"></ul>
</div>
<div class="appDiv">
<h3>其他应用</h3>
<ul id="otherApp"></ul>
</div>
</div>
</body>
</html>
