兰州移动 Vlan id 兰州移动网上营业厅

转载
码海探险家 2024-05-18 07:50:33
文章标签 兰州移动 Vlan id css html 拖拽 文章分类 云原生云计算
表单拖动列，改变列的位置
<!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
本文章为转载内容，我们尊重原作者对文章享有的著作权。如有内容错误或侵权问题，欢迎原作者联系我们进行内容更正或删除文章。