zoukankan      html  css  js  c++  java
  • JS拖拽效果

    <!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>
  • 相关阅读:
    ngnix.conf的配置结构
    springboot多环境部署(profile多环境支持)
    CSS学习
    关于Web2.0
    Windows PowerShell使用
    什么是域?
    python浅学【网络服务中间件】之Celery
    python浅学【网络服务中间件】之RabbitMQ
    python浅学【网络服务中间件】之MongoDB
    python浅学【网络服务中间件】之Redis
  • 原文地址:https://www.cnblogs.com/keringing/p/3405290.html
Copyright © 2011-2022 走看看