JAVASCRIPT 拖拽图片墙

今天模拟了一个图片墙的拖拽功能

效果图：

javascript部分：

/*-----------------------------------------------------------------------------
*作者:cici , email:105466706@qq.com
*version:1.0  , 时间：2013-05-21
-----------------------------------------------------------------------------*/
photoLib={
    iMinZindex:2,
    aPos :[],
    getByClass:function(oParent,sClass){
        var i=0,aResults=[],
            aObjs = oParent.getElementsByTagName('*');
        for(i=0;i<aObjs.length;i++){
            if(aObjs[i].className == sClass){
                aResults.push(aObjs[i]);
            }
        }
        return aResults;
    },
    init:function(sClass){
        var i=0,j=0,_this=this;
        var oDiv = document.getElementById('wall');
        var aDivs = oDiv.getElementsByTagName('div');
            
        for (j=0;j<aDivs.length ;j++ )
        {
            _this.aPos[j]={'left':aDivs[j].offsetLeft,'top':aDivs[j].offsetTop};
            aDivs[j].index=j;
        }

        for(j=0;j<aDivs.length;j++){
            aDivs[j].style.position='absolute';
            aDivs[j].style.margin='0px';
            aDivs[j].style.left=_this.aPos[j].left;
            aDivs[j].style.top=_this.aPos[j].top;
        }

        for(j=0;j<aDivs.length;j++){
            _this.setDrag(aDivs[j]);
        }
    }
    ,
    addEvent:function(obj,sEvent,fn){
        if(obj.attachEvent){
            obj.attachEvent('on'+sEvent,function(){
                fn.call(obj);
            });
        }else{
            obj.addEventListener(sEvent,fn,false);
        }
    },
    setDrag:function(obj){
        var _this = this;
        obj.onmousedown=function(e){
            var oEvent = e||event;
            obj.style.zIndex = _this.iMinZindex++;
            var distX = oEvent.clientX-obj.offsetLeft;
            var distY = oEvent.clientY-obj.offsetTop;
            document.onmousemove = function(e){
                var oEvent = e||event;
                var i=0;
                var oDiv = document.getElementById('wall');
                var aDivs = oDiv.getElementsByTagName('div');
                obj.style.left = oEvent.clientX-distX+'px';
                obj.style.top = oEvent.clientY-distY+'px';
                for(i=0;i<aDivs.length;i++){
                    aDivs[i].className='';
                }
                var oNear = _this.findNearest(obj);
                if(oNear){
                    oNear.className='active';
                }
            }
            document.onmouseup=function(){
                document.onmousemove=null;
                document.onmouseup=null;
                if(obj.releaseCapture){
                    obj.releaseCapture();
                }
                var oNear = _this.findNearest(obj);
                if(oNear){
                    oNear.className='';
                    oNear.style.zIndex=_this.iMinZindex++;
                    obj.style.zIndex=_this.iMinZindex++;
                    _this.startMove(oNear, _this.aPos[obj.index]);
                    _this.startMove(obj, _this.aPos[oNear.index]);
                    var tmp=0;
                    tmp=obj.index;
                    obj.index=oNear.index;
                    oNear.index=tmp;

                }else
                {
                    _this.startMove(obj, _this.aPos[obj.index]);
                }

            };
            clearInterval(obj.timer);
            if(obj.setCapture){
                obj.setCapture();
            }
            return false;
        }
    },
    findNearest:function(obj){
        var iMin =99999,i=0;
        var iMinIndex=-1;
        var    oDiv= document.getElementById('wall');
        var aDivs = oDiv.getElementsByTagName('div');
        var _this = this;
        for(i=0;i<aDivs.length;i++){
            if(obj==aDivs[i]){continue;}
            if(_this.checkColl(obj,aDivs[i])){
                var dis = _this.getDist(obj,aDivs[i]);
                if(iMin>dis){
                    iMin = dis;
                    iMinIndex=i;
                }
            }
        }
        if(iMinIndex==-1){
            return null;
        }else{
            return aDivs[iMinIndex];
        }


    },
    //碰撞检测
    checkColl:function(obj1,obj2){
        var l1=obj1.offsetLeft;
        var r1=obj1.offsetLeft+obj1.offsetWidth;
        var t1=obj1.offsetTop;
        var b1=obj1.offsetTop+obj1.offsetHeight;

        var l2=obj2.offsetLeft;
        var r2=obj2.offsetLeft+obj2.offsetWidth;
        var t2=obj2.offsetTop;
        var b2=obj2.offsetTop+obj2.offsetHeight;
        
        if(l1>r2 || r1<l2||b1<t2 || t1>b2){
            return false;
        }else{
            return true;
        }
    },
    //获取两个对象的中心点距离
    getDist:function (obj1,obj2){
        var a=obj1.offsetLeft-obj2.offsetLeft;
        var b=obj1.offsetTop-obj2.offsetTop;
        return Math.sqrt(a*a+b*b);
    },

    getStyle:function (obj, attr)
    {
        if(obj.currentStyle)
        {
            return obj.currentStyle[attr];
        }
        else
        {
            return getComputedStyle(obj, false)[attr];
        }
    },

    startMove:function (obj, json, fn)
        {
            var _this = this;
            clearInterval(obj.timer);
            obj.timer=setInterval(function (){
                var bStop=true;        //这一次运动就结束了——所有的值都到达了
                for(var attr in json)
                {
                    //1.取当前的值
                    var iCur=0;
                    
                    if(attr=='opacity')
                    {
                        iCur=parseInt(parseFloat(_this.getStyle(obj, attr))*100);
                    }
                    else
                    {
                        iCur=parseInt(_this.getStyle(obj, attr));
                    }
                    
                    //2.算速度
                    var iSpeed=(json[attr]-iCur)/8;
                    iSpeed=iSpeed>0?Math.ceil(iSpeed):Math.floor(iSpeed);
                    
                    //3.检测停止
                    if(iCur!=json[attr])
                    {
                        bStop=false;
                    }
                    
                    if(attr=='opacity')
                    {
                        obj.style.filter='alpha(opacity:'+(iCur+iSpeed)+')';
                        obj.style.opacity=(iCur+iSpeed)/100;
                    }
                    else
                    {
                        obj.style[attr]=iCur+iSpeed+'px';
                    }
                }
                
                if(bStop)
                {
                    clearInterval(obj.timer);
                    
                    if(fn)
                    {
                        fn();
                    }
                }
            }, 30)
        }
}

 

HTML部分

<!DOCTYPE>
<HTML>
 <HEAD>
  <TITLE> New Document </TITLE>
  <style>
    *{
        margin:0px;
        padding:0px;
    }
    .wall{
        margin:10px auto;
        width:680px;
        height:auto;
        background:#ccc;
        position:relative;

    }
    .wall div{
        width:140px;
        height:120px;
        margin:10px;
        float:left;
        z-index:1;
        padding:5px;
        background:gray;

    }
    .wall .active{
        width:140px;
        height:120px;
        margin:10px;
        float:left;
        padding:5px;
        background:#333;
        filter:alpha(opacity:30);
        opacity:0.3;

    }
    .wall div img{
        width:140px;
        height:120px;
    }


  </style>
    <script type="text/javascript" src="js/photo.js"></script>
    <script type="text/javascript">
        window.onload = function(){
            photoLib.init();
        }
    </script>
 </HEAD>

 <BODY>
 <div class="wall" id="wall">
    <div><img src="images/0.png" /></div>
    <div><img src="images/1.png" /></div>
    <div><img src="images/2.png" /></div>
    <div><img src="images/3.png" /></div>
    <div><img src="images/4.png" /></div>
    <div><img src="images/5.png" /></div>
    <div><img src="images/6.png" /></div>
    <div><img src="images/7.png" /></div>
    <div><img src="images/8.png" /></div>
    <div><img src="images/9.png" /></div>
    <div><img src="images/10.png" /></div>
    <div><img src="images/11.png" /></div>
    <div><img src="images/12.png" /></div>
    <div><img src="images/13.png" /></div>
    <div><img src="images/14.png" /></div>
 </div> 
 </BODY>
</HTML>

 

 

转载于:https://www.cnblogs.com/open-eye/archive/2013/05/23/3094059.html