js拖拽换位置，使用数组方法

之前一直需要一个拖拽效果，网上找了些感觉不是不好用，就是写的有些地方让人不太满意，下面贡献一个自己写的。亲测可用，拖动后可互换位置！（带有注释）

方法/步骤
CSS代码部分
<style>
* { padding:0;margin:0;list-style: none }
html,body { height:100%; overflow:hidden; }
ul { margin:50px auto;position:relative; width:1100px; height:500px;}
ul li { float:left; width:25%; cursor:pointer; padding:10px; box-sizing:border-box; height:33%}
ul img { height:100%;width:100%; box-shadow:0 3px 4px rgba(102,102,102,0.5) }
</style>
JS代码部分
<script src="http://code.jquery.com/jquery-1.11.1.js"></script>
<script>
$(function(){

        var ps={L:[],R:[],T:[],B:[]};
        for(var i=11; i>=0; i--){
                var oLi = $(‘li‘).eq(i),
                        gLi = oLi.get(0);

                oLi.css({‘left‘:gLi.offsetLeft+‘px‘,‘top‘:gLi.offsetTop+‘px‘,‘position‘:‘absolute‘,‘margin‘:0});
                ps.L.push(gLi.offsetLeft);
                ps.T.push(gLi.offsetTop);
                ps.R.push(gLi.offsetLeft + gLi.offsetWidth);
                ps.B.push(gLi.offsetTop + gLi.offsetHeight);
        };
           ps.L = ps.L.reverse();
                ps.R = ps.R.reverse();
                 ps.T = ps.T.reverse();
                  ps.B = ps.B.reverse();  //储存位置                   

        //初始化
        var b = 0;

        $(document).on(‘mousedown‘,‘li‘,function(e){
             e.preventDefault();
                 var _this = this;
                 if(_this.setCapture){_this.setCapture()};
                 var X = e.clientX - _this.offsetLeft,
                     Y = e.clientY - _this.offsetTop,
                     oList = $(‘li‘),
                         attr = [];
                     my_index = $( _this ).attr(‘index‘);     //初始保存一个原来的Index,回到原来的数组(位置)
                     $(_this).css({‘opacity‘:0.9,‘zIndex‘:1});
                     document.index = my_index;             //目的是为了脱离变量作用域

                          $(‘li‘).each(function() {
                                  attr.push( $(this).attr(‘index‘) )
                          });                

        $(document).on(‘mousemove‘,function(e){
             var lt = e.clientX - X,
                     tp = e.clientY - Y,
                     screen_l = e.clientX - _this.parentNode.offsetLeft,
                     screen_t = e.clientY - _this.parentNode.offsetTop;
                 $(_this).css({‘left‘:lt+‘px‘,‘top‘:tp+‘px‘});

                 for(var i=0;i<12;i++){

                        var he_index = parseInt(oList.eq(i).attr(‘index‘));
                    if(screen_l>ps.L[he_index]&&screen_l<ps.R[he_index]&&screen_t>ps.T[he_index]&&screen_t<ps.B[he_index]){
                                var i_index = parseInt($(_this).attr(‘index‘));
                if(he_index == i_index)continue;
                                document.index = he_index;              //当找到元素保存要抵达的位置的index
                                document.flag = false;
                                var test = function (num,j){
                                           var he_Li = $(‘li[index=‘+j+‘]‘);
                                           $(he_Li).stop();
                                           he_Li.animate({
                                                   left:ps.L[j+num],
                                                   top:ps.T[j+num]
                                           },‘fast‘);
                                           he_Li.attr(‘index‘,j+num);
                                 };
                                 //利用属性选择器找到对应index(也就是找到数组相应位置)的元素;并且变换属性index到相应的数组索引；

                                 if(i_index>he_index){
                                         for(var j=i_index-1; j>=he_index; j--){
                            test(1,j);
                                         }
                                 }else{
                                         for(var j=i_index+1; j<he_index+1; j++){
                            test(-1,j);
                                         }
                                 };
                                 $(_this).attr(‘index‘,he_index);  //变换_this的index
                                 document.flag = true;

                        }else{
                 if(document.flag){
                         var parent = _this.parentNode,
                                                 parent_X = e.clientX - parent.offsetLeft,
                                                 parent_Y = e.clientY - parent.offsetTop;
                                         if( parent_X<0||parent_X>parent.offsetWidth||parent_Y<0||parent_Y>parent.offsetHeight ){
                                      oList.not(_this).each(function(index, element) {
                                                        var a = $(element).index();
                                $(element).animate({
                                                                   left:ps.L[attr[a]],
                                                                   top:ps.T[attr[a]]
                                                            },‘fast‘).attr(‘index‘,attr[a])
                         });
                             document.index = my_index;
                                                 $(_this).attr(‘index‘,my_index);
                                             document.flag = false;
                                                 //当移出父节点还原
                                         }

                                 }
                    };

                 };
        });
        $(document).on(‘mouseup‘,function(){
         if(_this.releaseCapture){
                     _this.releaseCapture();
                 };
                 $(this).off(‘mousemove‘);
                 $(this).off(‘mouseup‘);

                 $(_this).animate({
                                left:ps.L[document.index],
                                top:ps.T[document.index]
                 },‘fast‘,function(){
                                $(_this).css({‘opacity‘:1,‘zIndex‘:0})
                 });
                 delete document.index;
                 delete document.flag;

        });
        });

})
</script>
上面的是网页 head区域， 下面的是 body区域
 <ul>
    <li index="0"><img src="http://www.baidu.com/img/bd_logo1.png" title="百度" /></li>
    <li index="1"><img src="http://www.baidu.com/img/bd_logo1.png" title="百度" /></li>
    <li index="2"><img src="http://www.baidu.com/img/bd_logo1.png" title="百度" /></li>
    <li index="3"><img src="http://www.baidu.com/img/bd_logo1.png" title="百度" /></li>
    <li index="4"><img src="http://www.baidu.com/img/bd_logo1.png" title="百度" /></li>
    <li index="5"><img src="http://www.baidu.com/img/bd_logo1.png" title="百度" /></li>
    <li index="6"><img src="http://www.baidu.com/img/bd_logo1.png" title="百度" /></li>
    <li index="7"><img src="http://www.baidu.com/img/bd_logo1.png" title="百度" /></li>
    <li index="8"><img src="http://www.baidu.com/img/bd_logo1.png" title="百度" /></li>
    <li index="9"><img src="http://www.baidu.com/img/bd_logo1.png" title="百度" /></li>
    <li index="10"><img src="http://www.baidu.com/img/bd_logo1.png" title="百度" /></li>
    <li index="11"><img src="http://www.baidu.com/img/bd_logo1.png" title="百度" /></li>

  </ul>