最近在群里看到很多热心的网友分享学习资料在Jquery学堂群里，为了所有Jquery学堂群里的成员都可以利用，我就把它整理成文章分享到JquerySchool网站上了，js实现鼠标拖动表格行进行数据排序特效是一款很实用的功能，虽然前端台用table布局已经越来越少啦，但是后台管理也经常用到，所以网友们有时间的话都可以看一下哦。
此js特效主要有3个事件操作如下：
1、鼠标按下操作事件MouseDownToMove
2、鼠标拖动操作事件MouseMoveToMove
3、鼠标松开操作事件MouseUpToMove
代码如下：
var beginMoving=false;
//鼠标按下操作事件
function MouseDownToMove(obj){
obj.style.zIndex=1;
obj.mouseDownY=event.clientY;
obj.mouseDownX=event.clientX;
beginMoving=true;
obj.setCapture();
}
//鼠标拖动操作事件
function MouseMoveToMove(obj){
if(!beginMoving) return false;
obj.style.top = (event.clientY-obj.mouseDownY);
obj.style.left = (event.clientX-obj.mouseDownX);
}
//鼠标松开操作事件
function MouseUpToMove(obj){
if(!beginMoving) return false;
obj.releaseCapture();
obj.style.top=0;
obj.style.left=0;
obj.style.zIndex=0;
beginMoving=false;
var tempTop=event.clientY-obj.mouseDownY;
var tempRowIndex=(tempTop-tempTop%25)/25;
if(tempRowIndex+obj.rowIndex <0 )tempRowIndex=-1;
else tempRowIndex=tempRowIndex+obj.rowIndex;
if(tempRowIndex >= obj.parentElement.rows.length-1) tempRowIndex = obj.parentElement.rows.length-1;
obj.parentElement.moveRow(obj.rowIndex,tempRowIndex);
}
效果如下：
在线演示
打包下载
如果您觉得本文的内容对您的学习有所帮助：
关键字：
鼠标拖动特效 数据排序特效 表格插件 js特效