js实现拖曳排序的插件

这是一个基于jQuery实现的可以进行拖曳排序功能的插件！    
实现的功能：            
（1）可以随意地拖曳item进行排序，已经整合了包括产生滚动条的情况   
（2）可以自定义各种的样式   
（3）对于一些细节问题进行很好的处理，比如拖曳时，可以防止产生不必要的误击作用   


用法：        
    $("#container").Jsdrag({                                
        //item的类名,必须设定            
        itemDiv:string,   
        //drag的div的类名, 必须设定             
        dragDiv:string,       
        //虚框css的样式，选择设置，不设置启用插件默认样式       
        tempSty:{},       
        //按下鼠标时拖曳的item的css样式，选择设置，不设置启用插件默认样式    
        itemdashSty:{},            
        //鼠标进入的drag拖曳框的css样式，选择设置，不设置启用插件默认样式        
        dragSty:{},     
        //拖曳过程中拖曳的item的css样式选择设置，不设置启用插件默认样式        
        theDivSty:{},    
        //鼠标进入的drag拖曳框时显示的信息，默认是:'按下鼠标拖曳'                    
        msg:string       

    });

代码：

;(function($){  // 定义插件全局变量，可以在其他的函数中引用    var setting,$this;    //鼠标相对于drag元素对象偏移量    var range = { x: 0, y: 0 };    //拖拽对象时的x,y坐标相对于产生滚动的div      var lastPos = { x: 0, y: 0, x1:0, y1:0 };    //目标对象的位置x,y    var tarPos = { x: 0, y: 0, x1: 0, y1: 0 };    // 目标元素对象的坐标初始化，theDiv:拖拽对象,itemDiv:item对象 move:拖拽状态,     // theDivHeight:高度，theDivHalf：一半高度 ，tarFirstY:第一个item距离产生滚动条的div的距离    var theDiv = null, itemDiv = null, move = false, theDivHeight = 0, theDivHalf = 0; tarFirstY = 0;    //产生的滚动条高度    var scrollTop;    // item对象名,drag对象名,tempDiv虚框的对象名,tarFirst第一个item    var item,drag,temp,tempDiv,tarFirst;    // 执行的方法    var methods = {      // 初始化变量      init:function(options) {        return this.each(function() {          // 判断目标DOM是否存在          $this = $(this);          if($this.length < 1) {              return false;          }          var defaults = {              'itemDiv':null,              'dragDiv':null,              // 虚框默认的样式              'tempSty':{              "position":"relative",               "width":"100%",               "height":"105px",               "margin-bottom":"5px",               "border":"1px dashed #f00"            },                    // 拖曳的item的默认样式            'itemdashSty':{              "position":"absolute",               "width":"100%",               "height":"100px",              "margin-bottom":"5px",               "border":"1px solid blue",               "background":"#ccc",              "z-index":"999"            },            // 鼠标进入drag的div的默认样式            'dragSty':{              "background-color":"#aaa",              "filter":"alpha(opacity=50)",               "-moz-opacity":"0.5",               "opacity":"0.5",              "text-align":"center"            },            // 按下鼠标时默认的动态设置的drag的div样式            'theDivSty':{              'position':"absolute",              'width':"100%",              "z-index":"1000",              "background-color":"#aaa",              "filter":"alpha(opacity=50)",               "-moz-opacity":"0.5",               "opacity":"0.5"            },            'msg':'按下鼠标拖曳'        };          options.tempSty = $.extend(defaults.tempSty,options.tempSty);          options.itemdashSty = $.extend(defaults.itemdashSty,options.itemdashSty);              options.dragSty = $.extend(defaults.dragSty,options.dragSty);          options.theDivSty = $.extend(defaults.theDivSty,options.theDivSty);              setting = $.extend(defaults,options);          //获取类名字符串           item = '.'+setting.itemDiv;          drag = '.'+setting.dragDiv;          //执行函数          methods['drag']();          return ;        });               },      //拖曳函数      drag:function() {        // 鼠标移到drag的div        $this.find(drag).on('mouseover',function(){              $(this).css(setting.dragSty).text(setting.msg);            }).on('mouseout',function(){              $(this).removeAttr("style").text('');             }).on('mousedown',function(event){              // 判断是否存在虚框            if(!$this.find('.dash').length) {                // 拖曳的this对象              theDiv = $(this);              // 拖曳的this对象对应的item对象              itemDiv = theDiv.parent();              //鼠标相对于该元素偏移量                range.x = event.pageX - theDiv.offset().left;                range.y = event.pageY - theDiv.offset().top;              // div产生的滚动条高度              scrollTop = $this.scrollTop();              //item相对于父级元素(产生滚动条的div)的左边距离和顶部距离              var preleft = itemDiv.position().left + 10;                var pretop = itemDiv.position().top + scrollTop + 10;              //获取item的高度              theDivHeight = itemDiv.height();              // item的高度的一半              theDivHalf = theDivHeight/2;              // 动态设置拖曳框的样式              theDiv.css(setting.theDivSty).css({                'height':theDivHeight               }).text('');              itemDiv.attr('class','item-dash').css(setting.itemdashSty).css({                left: preleft+'px',                top:pretop+'px'              });              /**               *创建新元素 插入拖拽元素之前的位置(虚线框)              *在选中元素之前插入一个新的div              */                          $("<div class='dash'></div>").insertBefore(itemDiv).css(setting.tempSty);                              // 获取虚框对象              tempDiv = $('.dash');              // 准备移动状态              move = true;          }        }).on('mousemove',function(event){          //只是按下鼠标，没有移动，退出          if (!move) return false;          var parent_left = $this.offset().left;          var parent_top = $this.offset().top;          // 移动产生的滚动条距离div的顶部会不断变化,在这里重新计算          scrollTop = $this.scrollTop();          /**           *拖曳位置，item相对于$this的左边距离和顶部距离          *鼠标的移动产生不同的位置(这里是可以移动的原因)          */          lastPos.x = event.pageX - parent_left - range.x;            lastPos.y = event.pageY - parent_top - range.y + scrollTop;                    // 设定比较值          lastPos.y1 = lastPos.y + theDivHeight - scrollTop;          // 鼠标移动，拖拽元素随机改变位置移动          itemDiv.css({              left: lastPos.x + 'px',              top: lastPos.y + 'px'          });          //循环排序，计算距离，插入虚框          //获取虚框对象，通过下面的循环计算，再插入对应位置          $(item).each(function(){            var tarDiv = $(this);            tarPos.x = tarDiv.position().left;              tarPos.y = tarDiv.position().top;              tarPos.y1 = tarPos.y + tarDiv.height()/2;            // 获得第一个元素            tarFirst = $(item).eq(0);                 tarFirstY = tarFirst.position().top + theDivHalf;            //拖拽对象 移动到第一个位置              if (lastPos.y <= tarFirstY) {                  tempDiv.insertBefore(tarFirst);              }            //判断要插入目标元素的坐标后,直接插入              if (lastPos.y >= tarPos.y - theDivHalf && lastPos.y1 >= tarPos.y1){                  tempDiv.insertAfter(tarDiv);              }           });        }).on('mouseup',function(event){          //恢复对象的初始样式           itemDiv.removeAttr("style").attr("class",setting.itemDiv);                      // 拖拽元素插入到 虚线div的位置之前          itemDiv.insertBefore(tempDiv);          //移除动态设置的样式          theDiv.removeAttr("style");          // 删除新建的虚线div             tempDiv.remove();          move = false;          return ;         });            }    }    // 定义暴露函数    $.fn.Jsdrag = function(){        var method = arguments[0];        if(methods[method]) {            method = methods[method];            //将含有length属性的数组获取从第下标为1的之后的数组元素，并返回数组            arguments = Array.prototype.slice.call(arguments,1);        }else if(typeof(method)=="object" || !method) {            method = methods.init;        }else{            $.error( 'Method ' +  method + ' does not exist plug on jQuery.Jsdrag' );            return this;        }        //jquery的实例对象将拥有执行method的能力,并且arguments为method的参数        return method.apply(this,arguments);    }})(jQuery);