页面上拖动图片进行排序

之前做的一个拖动图片，对图片进行排序的功能。类似于网易相册的自定义排序，页面初始化效果：

把第一张图片拖动到红框标注的绿条处（绿条拖动的时候才会出来）

实现规则：拖动一张图片到某张图片的位置时，该位置后面的图片向后移动。

js代码：

$(document).ready(function(){
    var that={
        imgaes:{},
        box:"",
        aveWidth:86,
        aveHeight:86,
        moveObj:'',
        status:false
    }
    var spacingHtml = '<div node-type="spacing"> </div>';
    var C = {
        initState:function(){
            that.images = $('[node-type="imgW"]');
            that.box= $('[node-type="box"]');
            
        }
    }
    var bindDOMFuncs = {
        'imgMouseDown':function(e){
            //var evt=fixEvent(e);
            //阻止浏览器默认行为
            var evt=e;
            //if(evt.which && evt.button==0){
                that.follow=true;
                $(that.images).bind('dragstart',bindDOMFuncs['unDrag']);
            //}else{
            //    $(that.images).unbind('dragstart',bindDOMFuncs['unDrag']);
            //}

            $(that.images).removeClass('selected');
            
            $(this).addClass('selected');
            
            $(that.box).append(spacingHtml);
            //获得要移动的节点
            that.moveObj = this;

            $(that.images).bind('mousemove',bindDOMFuncs['imgMouseMove']);
        },
        'imgMouseMove':function(e){    
            if(that.follow){                
                var disX = e.pageX-$(that.box).offset().left;//鼠标位置距离父节点左边的距离
                var disY = e.pageY-$(that.box).offset().top;//鼠标位置距离父节点上边的距离
                //判断第一张图片且向左移的情况
                var posLeft = $(that.moveObj).position().left+that.aveWidth/2;
                var posTop = $(that.moveObj).position().top;
                if(that.moveObj){
                    if((that.moveObj == $('[node-type="imgW"]')[0]) && disX<=posLeft && disY<=posTop+that.aveHeight){  　　                          
                     　　that.status = false;  
　　　　　　　　　　　　    return;
                        
                    }
                    if((that.moveObj == $('[node-type="imgW"]')[that.images.length-1]) && disX>=posLeft && disY>=posTop){ 
　　　　　　　　　　　　　　that.status = false;                   
                        return;
                        

                    }
                }
                //确定移动目标位置    
                var colNum = Math.round(disX/that.aveWidth);
                var rowNum = parseInt(disY/that.aveHeight);                                
                var left = colNum*that.aveWidth;
                var top =  rowNum*that.aveHeight;
                
                $('[node-type="spacing"]').css({
                    'left':left+'px',
                    'top':top+'px'
                });
                $('[node-type="spacing"]').addClass('spacing');                        
                that.status = true;
            }            
        },
        'imgMouseUp':function(e){
            that.follow=false;
            if(!that.status){
                return;
            }
            that.status = false;
            $(that.images).unbind('dragstart',bindDOMFuncs['unDrag']);
                        
            var sLeft = $('[node-type="spacing"]').position().left;
            var sTop = $('[node-type="spacing"]').position().top;
            var xNum = sLeft/that.aveWidth;
            var yNum = sTop/that.aveHeight;            
            var index = yNum*8+xNum;
            
            if(index == 0){
                var clickObj = $('[node-type="imgW"]')[index];                
                that.moveObj && $(clickObj).before(that.moveObj);
            }else{
                var clickObj = $('[node-type="imgW"]')[index-1];                
                that.moveObj && $(clickObj).after(that.moveObj);
            }
            $('[node-type="spacing"]').remove();

            $(that.images).unbind('mousemove',bindDOMFuncs['imgMouseMove']);
            that.moveObj = null;
            
        },
        'unDrag':function(e){
            if(e.stopPropagation){
                e.preventDefault();
                e.stopPropagation();
            }else{
                e.cancelBubble = true;
                e.returnValue = false;
            }
            return false;
        },
        'imgMouseLeave':function(e){        
            $('[node-type="spacing"]') && $('[node-type="spacing"]').hide();
        },
        'imgMouseEnter':function(e){
            $('[node-type="spacing"]') && $('[node-type="spacing"]').show();
        },
        'docMouseUp':function(e){
            $('[node-type="spacing"]') && $('[node-type="spacing"]').remove();
        },
        'imgClick':function(e){
            if(e.ctrlKey){
                $(this).addClass('selected');
                that.moveObj.push(this);
            }else{
                //that.moveObj = null;
                $(that.images).removeClass('selected');
                $(this).addClass('selected');
                //that.moveObj = this;
            }
        }
    }
    var bindDom=function(){
        $(that.images).bind('mousedown',bindDOMFuncs['imgMouseDown']);
        $(that.box).bind('mouseup',bindDOMFuncs['imgMouseUp']);
        $(that.box).bind('mouseenter',bindDOMFuncs['imgMouseEnter']);
        $(that.box).bind('mouseleave',bindDOMFuncs['imgMouseLeave']);
        $(document).bind('mouseup',bindDOMFuncs['docMouseUp']);
        //$(that.images).bind('click',bindDOMFuncs['imgClick']);    
        
        
    }
    var init = function(){
        C.initState();
        bindDom();
    }
    init();
});

html代码：

<div class="dragPic">
            <div class="dragPicBox clearfix" node-type="box">
                <div class="item" node-type="imgW" num="1"><span><img src="temp/1.gif" /></span></div>
                <div class="item" node-type="imgW" num="2"><span><img src="temp/2.gif" /></span></div>
                <div class="item" node-type="imgW" num="3"><span><img src="temp/3.jpg" /></span></div>
                <div class="item" node-type="imgW" num="4"><span><img src="temp/4.jpg" /></span></div>
                <div class="item" node-type="imgW" num="5"><span><img src="temp/5.jpg" /></span></div>
                <div class="item" node-type="imgW" num="6"><span><img src="temp/6.jpg" /></span></div>
                <div class="item" node-type="imgW" num="7"><span><img src="temp/7.jpg" /></span></div>
                <div class="item" node-type="imgW" num="8"><span><img src="temp/8.jpg" /></span></div>
                <div class="item" node-type="imgW" num="9"><span><img src="temp/9.jpg" /></span></div>
                <div class="item" node-type="imgW" num="10"><span><img src="temp/10.jpg" /></span></div>
                <div class="item" node-type="imgW" num="11"><span><img src="temp/11.jpg" /></span></div>
                <div class="item" node-type="imgW" num="12"><span><img src="temp/12.jpg" /></span></div>
                <!--<div class="spacing"> </div>-->
            </div>
            
        </div>

CSS代码：

.dragPic{
    width:704px;
    margin:50px auto;
}
.dragPicBox{
    width:704px;
    background-color:#c0ebd7;
    position:relative;
}
.dragPic .item{
    display: inline;
    float: left;
    height: 86px;
    width: 86px;
    cursor: move;
   
}
.dragPic .item span{
    width:80px;
    height:80px;
    display:block;
    margin:3px;
    border: 1px solid #CDCDCB;
}
.dragPic .item:hover span,.dragPic .selected span{
    border-color:#FF0000;
}
.dragPic .item.selected{
    border-color:#FF0000;
}
.dragPic span img{
    display: block;
    height: 80px;
    width: 80px;
}
.dragPic .spacing{
    position:absolute;
    width:6px;
    height:82px;
    background-color:#1ABC9C;
    margin-top:3px;
}

目前只支持单张图片的拖动，如果要支持多张图片的拖动的话，可以在此基础上修改即可。至于图片拖动后把图片位置如何让传给后端，那就是你们自己商量的事了，哈哈！！

我真是全盘分享了，满满都是血泪啊！！