拖动排序，从名字就不难想像，就是按住一行数据拖到想要的排序位置，保存新的排序队列。
思路
首先给列表行建立锚点，绑定mousedown和mouseup事件，当鼠标移动到想要插入的位置时，将对象行移动到目标行，然后对其经过的所有行进行排序处理。
思路很简单，但这里面仍然有几个问题要注意
1、移动到什么位置可以视作要插入到目标行的位置。
2、移动出了顶端和底端时，判断为第一和最后。
3、向上移动和向下移动的处理
解决
关于事件
Javascript里鼠标按下和放开事件为onmousedown，onmouseup，JQuery里是mousedown，mouseup，所以，这里使用mousedown和mouseup
首先，要知道界面有多少行，每一行有多高，因为要判断鼠标的移动距离
复制代码 代码如下:
var tbodyHeight=setting.frame.outerHeight(); //setting.frame，父对象
var lineNum=$("."+setting.dgLine).length; //setting.dgLine，每一行的classname
var lineHeight=Math.ceil(tbodyHeight/lineNum);
之所有要取lineNum（行数），除了计算行高外，还有个目的是要使用index()，通过序列索引值来进行移动行到目标位置
当mousedown事件触发后，就要开始计算鼠标移动的距离，用于判断该行到底要移动到什么位置
复制代码 代码如下:
dgid=$(this).attr(setting.id); //移动行的ID，setting.id，是每一行用来标记ID的名称
thisIndex=$("#"+setting.linePre+dgid).index(); //该行的索引，setting.linePre，每一行ID关辍
thisLineTop=$("#"+setting.linePre+dgid).offset().top; //该行的top值
topDistance=thisIndex*lineHeight; //该行距离第一行顶端的距离
downDistance=(lineNum-thisIndex-1)*lineHeight; //该行距离最后一行底端的距离
dgid主要是用来区分每一行的标识，一般的列表都是程序循环输出来的，如果没有这样一个ID，就分不出哪行是哪行，所以，在HTML上，需要定义一个存放ID的家伙。程序通过attr就是来取这个值，保证每一行都有自己唯一的值。
thisLineTop，主要是用来和鼠标移动位置进行高度计算，然后根据行高、索引值来判断是移动到哪一行了。还有个作用是用来确定是否按在了移动锚点上，如果有值，说明是，那后面的mouseup就是成立的，如果没有值，说明没有按到锚点上，mouseup不执行任何操作。为什么要这样做呢？因为不管在页面的什么位置点鼠标，都会触发mouseup事件，如果没有一个判断，就会不停的执行，那就会产生一些问题。
topDistance和downDistance，用来判断鼠标有没有移出列表的范围，如果移除了，也就是鼠标移动的距离大于topDistance或downDistance，那就可以判断为需要移动到第一行或最后一行。
mousedown事件主要做的，就是这几件事情，当然，为了效果，还可以增加一些东西
复制代码 代码如下:
$("#"+setting.linePre+dgid).css('background',setting.lineHighlight); //高亮移动行
var left=e.pageX+20;
var top=e.pageY;
dg_tips(left,top); //创建一个提示层
$('body').css('cursor','move'); //更改页面的鼠标手势
$("body").disableSelection(); //禁止按下鼠标后移动鼠标时选中页面元素
setting.frame.mousemove(function(e){ //让提示层跟随鼠标移动
$("#dgf").css({"left":e.pageX+setting.tipsOffsetLeft+'px',"top":e.pageY+'px'});
});
这些的目的，只是让操作起来更有效果，比如高亮行，就是要让用户知道，他们操作的是哪一行。提示层的作用也一样。
关于禁止选中，.disableSelection();这是jQuery_UI里带的方法，如果你有使用jQuery_UI，那可以直接使用它，如果没有使用，可以这样做
复制代码 代码如下:
$('body').each(function() {
$(this).attr('unselectable', 'on').css({
'-moz-user-select':'none',
'-webkit-user-select':'none',
'user-select':'none'
}).each(function() {
this.onselectstart = function() { return false; };
});
});
取消禁止选择
复制代码 代码如下:
$('body').each(function() {
$(this).attr('unselectable', '').css({
'-moz-user-select':'',
'-webkit-user-select':'',
'user-select':''
});
});
考虑到通用性，所以后面的代码里，不会使用.disableSelection();
好了，下面是mouseup事件。这里mouseup事件是绑定在body上的，因为mouseup如果只是绑定在锚点上，那当鼠标移出锚点的时候，再松开鼠标，会发现，这个mouseup事件不执行了，因为它会认为是别的对象的mouseup。所以，最保险的方法是用$('body').mouseup。这样基本上就不会有问题。
mouseup触发后，首先就要判断thisLineTop是不是有值，防止无意义的事件执行。跟着判断鼠标移动的距离是正还是负，也就是向上移动还是向下移动。
var moveDistance=e.pageY-thisLineTop;
根据不同的方向作不同的处理
复制代码 代码如下: