表单拖动列，改变列的位置
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>无标题文档</title> <script src="jquery.min.js"></script> <style> td{color:#999} th{ cursor: move;line-height: 34px;min-width:150px;} .createDivBg{ position: fixed;top: 0;bottom: 0;left: 0;right: 0;z-index: 10000;cursor: move;-moz-user-select:none;-webkit-user-select: none;-o-user-select: none;-ms-user-select:none} .createDiv{ border: 1px dotted #ccc;height: 34px;line-height: 34px;background:#eee;position: absolute;z-index:100000} </style> </head> <body> <div class="Report"> <table class="" border="1" cellspacing="0"> <thead> <tr> <th value="1">公司名称</th> <th value="2">订单号</th> <th value="3">操作日期</th> <th value="4">PNR</th> <th value="5">乘客英文名</th> <th value="6">乘客类型</th> <th value="7">证件类型</th> <th value="8">证件号</th> <th value="9">乘客手机号码</th> <th value="10">票面价</th> </tr> </thead> <tbody> <tr><td>蓝城房产建设管理集团有限公司</td><td>FA20160801144605983</td><td>2016-08-02</td><td>HY59C0</td><td></td><td>成人</td><td>身份证</td><td>330102196709050315</td><td>13705819983</td><td>-940.00</td></tr> <tr><td>东芝信息机器（杭州）有限公司</td><td>FA20160729123124926</td><td>2016-08-02</td><td>KTFW44</td><td></td><td>成人</td><td>身份证</td><td>36043019820211171X</td><td>13588837340</td><td>0.00</td></tr> <tr><td>东芝信息机器（杭州）有限公司</td><td>FA20160729123124926</td><td>2016-08-02</td><td>KTFW44</td><td></td><td>成人</td><td>身份证</td><td>36043019820211171X</td><td>13588837340</td><td>0.00</td></tr> <tr><td>东芝信息机器（杭州）有限公司</td><td>FA20160729123124926</td><td>2016-08-02</td><td>KTFW44</td><td></td><td>成人</td><td>身份证</td><td>36043019820211171X</td><td>13588837340</td><td>0.00</td></tr> <tr><td>东芝信息机器（杭州）有限公司</td><td>FA20160729123124926</td><td>2016-08-02</td><td>KTFW44</td><td></td><td>成人</td><td>身份证</td><td>36043019820211171X</td><td>13588837340</td><td>0.00</td></tr> <tr><td>东芝信息机器（杭州）有限公司</td><td>FA20160729123124926</td><td>2016-08-02</td><td>KTFW44</td><td></td><td>成人</td><td>身份证</td><td>36043019820211171X</td><td>13588837340</td><td>0.00</td></tr> <tr><td>东芝信息机器（杭州）有限公司</td><td>FA20160729123124926</td><td>2016-08-02</td><td>KTFW44</td><td></td><td>成人</td><td>身份证</td><td>36043019820211171X</td><td>13588837340</td><td>0.00</td></tr> <tr><td>东芝信息机器（杭州）有限公司</td><td>FA20160729123124926</td><td>2016-08-02</td><td>KTFW44</td><td></td><td>成人</td><td>身份证</td><td>36043019820211171X</td><td>13588837340</td><td>0.00</td></tr> <tr><td>东芝信息机器（杭州）有限公司</td><td>FA20160729123124926</td><td>2016-08-02</td><td>KTFW44</td><td></td><td>成人</td><td>身份证</td><td>36043019820211171X</td><td>13588837340</td><td>0.00</td></tr> <tr><td>东芝信息机器（杭州）有限公司</td><td>FA20160729123124926</td><td>2016-08-02</td><td>KTFW44</td><td></td><td>成人</td><td>身份证</td><td>36043019820211171X</td><td>13588837340</td><td>0.00</td></tr> <tr><td>东芝信息机器（杭州）有限公司</td><td>FA20160729123124926</td><td>2016-08-02</td><td>KTFW44</td><td></td><td>成人</td><td>身份证</td><td>36043019820211171X</td><td>13588837340</td><td>0.00</td></tr> <tr><td>东芝信息机器（杭州）有限公司</td><td>FA20160729123124926</td><td>2016-08-02</td><td>KTFW44</td><td></td><td>成人</td><td>身份证</td><td>36043019820211171X</td><td>13588837340</td><td>0.00</td></tr> <tr><td>东芝信息机器（杭州）有限公司</td><td>FA20160729123124926</td><td>2016-08-02</td><td>KTFW44</td><td></td><td>成人</td><td>身份证</td><td>36043019820211171X</td><td>13588837340</td><td>0.00</td></tr> <tr><td>东芝信息机器（杭州）有限公司</td><td>FA20160729123124926</td><td>2016-08-02</td><td>KTFW44</td><td></td><td>成人</td><td>身份证</td><td>36043019820211171X</td><td>13588837340</td><td>0.00</td></tr> <tr><td>东芝信息机器（杭州）有限公司</td><td>FA20160729123124926</td><td>2016-08-02</td><td>KTFW44</td><td></td><td>成人</td><td>身份证</td><td>36043019820211171X</td><td>13588837340</td><td>0.00</td></tr> </tbody> </table> </div> </body> </html> <script> var arrTh = [];//保存初始每个th位置的数组 $('.Report th').each(function (i, e) { arrTh.push({ 'index': i, 'left': $(e).offset().left }); }); var thisThIndex = 0; var thisThLeft = 0;//存储当前拖拽层的位置 var isMove = false; $(document).on('mousedown','.Report th', function (e) { var initX = e.pageX - $(this).offset().left; var initY = $(this).offset().top;//点击的th到页面顶部的距离 var thisHtml = $(this).html();//点击的th的html thisThIndex = $(this).index();//点击的th的索引 thisThLeft = $(this).offset().left;//当前拖拽层的位置 $(this).css({ 'background': '#ccc' }); var createDiv = $('<div class="createDiv">' + thisHtml + '</div>');//创建一个div用于拖拽显示 var createDivBg = $('<div class="createDivBg"></div>');//创建一个背景，防止复制文字 $('body').append(createDiv,createDivBg);//填充到页面中 createDiv.css({ 'top': initY, 'left': $(this).offset().left });// 'width': $(this).width(),//设置拖拽层的初始位置 $(document).on('mousemove', function (ev) { if (Math.abs(ev.pageX - e.pageX) > 30) {//如果鼠标移动的位置超过30 isMove = true; thisThLeft = ev.pageX - createDiv.width() / 2;//刷新当前拖拽层的位置 if (thisThLeft <= $('.Report th').offset().left) { thisThLeft = $('.Report th').offset().left; } if (thisThLeft >= ($('.Report th').offset().left+$('.Report table').width()-createDiv.width())) { thisThLeft = $('.Report th').offset().left+$('.Report table').width()-createDiv.width(); } createDiv.css({ 'left': thisThLeft, 'top': initY });//拖拽层跟着鼠标走 var newsindex = 0;//循环的最后一个小于thisThLeft的索引 $.each(arrTh, function (index, element) {//遍历数组 var thIndex = element.index;//页面中所有th的索引 var thLeft = element.left;//页面中所有th到页面右边的距离 if (thisThLeft > thLeft) { newsindex = thIndex;//循环的最后一个小于thisThLeft的索引 } }); $('.Report th').eq(newsindex).css({ 'border-right': '2px solid red' }).siblings('th').css({ 'border-right': '1px solid #ddd' });//给当前th加边框 $('.Report tbody tr').each(function (tdindex, tdelement) {//给对应的列td加边框 $(tdelement).find('td').eq(newsindex).css({ 'border-right': '2px solid red' }).siblings('td').css({ 'border-right': '1px solid #ddd' }); }); } }); }); $(document).on('mouseup', function (e) { $('.Report th').css({ 'border-right': '1px solid #ddd','background':'none' }); $('.Report td').css({ 'border-right': '1px solid #ddd' }); $('.createDiv').remove(); $('.createDivBg').remove(); $(document).unbind('mousemove'); if (isMove) { isMove = false; var newsindex = 0;//循环的最后一个小于thisThLeft的索引 $.each(arrTh, function (index, element) { var thIndex = element.index; var thLeft = element.left; if (thisThLeft > thLeft) { newsindex = thIndex; } }); var newth = $('.Report th').eq(thisThIndex).prop('outerHTML'); //console.log(newsindex + ',,,' + thisThIndex); if (newsindex >= thisThIndex) { if (newsindex != 0) {//如果是第一个的情况下 $('.Report th').eq(thisThIndex).remove(); $('.Report th').eq(newsindex-1).after(newth); } } else { if ((newsindex + 2) != arrTh.length) {//如果是最后一个的情况下 $('.Report th').eq(thisThIndex).remove(); $('.Report th').eq(newsindex + 1).before(newth); } } $('.Report tbody tr').each(function (tdindex, tdelement) { var newtd = $(tdelement).find('td').eq(thisThIndex).prop('outerHTML'); if (newsindex >= thisThIndex) { if (newsindex != 0) { $(tdelement).find('td').eq(thisThIndex).remove(); $(tdelement).find('td').eq(newsindex - 1).after(newtd); } } else { if ((newsindex + 2) != arrTh.length) { $(tdelement).find('td').eq(thisThIndex).remove(); $(tdelement).find('td').eq(newsindex + 1).before(newtd); } } }); } arrTh = [];//重置保存每个th位置的数组 $('.Report th').each(function (i, e) { arrTh.push({ 'index': $(e).index(), 'left': $(e).offset().left }); }); //console.log(arrTh); }); </script>
完整代码请戳https://github.com/slailcp/dargtable/tree/master/drabTable