表格列的位置拖拽

来源：互联网发布：淘宝买家付款钱在哪里? 编辑：程序博客网时间：2024/05/17 07:09

转载请注明出处：http://blog.csdn.net/sllailcp/article

公司突然出了新需求，拖拽表格的列到指定的列，去网上找了下，没有合适产品需求的，就自己写了个小功能。

具体功能为：拖拽当前列当想要的位置

缺点：因为用的是添加到元素后面的方法，所以不能把列拖到第一列，但是可以和第一列交换（不介意这点的，也能满足需求）。如果有兴趣的可以自己完善这个问题。

以下是js代码

<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>

以下是html代码

        <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>

以下是css代码

        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}

以下是页面效果图：

（拖拽PNR，会给PNR标题一个背景色作为区分，另外回创建一个层被拖着走，用红线区分拖拽到那个地方，松开鼠标后，PNR就被换到了红线的位置）

1 0