功能是 table的列可以左右拖拽替换里面的内容，但是 列过多的时候 就会出现横向滚动条，现在的情况时 拖动到最后的时候滚动条并不会跟着走，想达到的结果是 拖拽列到最后的时候 想叫横向滚动条跟着走。 希望大佬解答下！谢谢
这是代码
<!DOCTYPE html>
<br> #table-draf {<br> position:fixed;<br> display:none;<br> background:#fff;<br> text-align:center;<br> top:0;<br> background-color:#000;<br> background-color:rgba(0,0,0,0.8);<br> color:#fff;<br> /*height:400px;*/<br> cursor:move;<br> }</p> <p>#table-draf p {<br> line-height: 2<br> }</p> <p>#tabledraf0 {<br> position: relative;<br> top: 0;<br> left: 0;<br> }<br> .table-responsive{</p> <pre><code>min-height: 0.01%; position: relative; overflow-x: auto; </code></pre> <p>}</p> <pre><code>table { width: 100%; empty-cells: show; background-color: transparent; border-collapse: collapse; border-spacing: 0 } table th { text-align: left; font-weight: 400 } .table-title { display: block; background: #82c6f9; padding: 11px 0; text-align: center; color: #fff; margin: 0; } .table th { background: #333333; color: #fff; font-weight: bold } .thead-opacity { opacity: .6; } .table th, .table td { text-align: center; padding: 6px 3px; word-break: break-all } .table-rowspan th>div, .table-rowspan td>div { display: inline-block; margin: 0 auto; width: 100%; padding: 2px; } .table-div { border-top: 1px solid #ddd; border-left: 0; border-right: 0; padding: 6px 0 } .table-div:first-child { border: 0 } .table td {} /*.table tbody tr:first-child:hover { background: #288ce2 !important </code></pre> <p>}*/</p> <pre><code>body .table-tongji tbody tr:first-child:hover { background: #fff !important; } .table tbody tr.success>td { background-color: #dff0d8 } .table tbody tr.error>td { background-color: #f2dede } .table tbody tr.warning>td { background-color: #fcf8e3 } .table tbody tr.info>td { background-color: #d9edf7 } .table tbody+tbody { border-top: 2px solid #ddd } .table .table { background-color: #fff } .table-border { border-top: 1px solid #ddd } .table-border th, .table-border td { border-bottom: 1px solid #ddd } .table-bg thead th { background-color: #f5fafe } .table-bordered { border: 1px solid #ddd; border-collapse: separate; *border-collapse: collapse; border-left: 0 } .table-bordered th, .table-bordered td { border-left: 1px solid #ddd } .table-border.table-bordered { border-bottom: 0 } .table-striped tbody>tr:nth-child(odd)>td { background-color: #f9f9f9 } .table-condensed th, .table-condensed td { padding: 4px 5px } .table-hover tbody tr:hover td { background-color: #f5f5f5 } .table tbody tr.selected td { background-color: #f3f3f3 } .table tbody tr.active, .table tbody tr.active>td, .table tbody tr.active>th, .table tbody tr .active { background-color: #f5f5f5!important } .table tbody tr.success, .table tbody tr.success>td, .table tbody tr.success>th, .table tbody tr .success { background-color: #dff0d8!important } .table tbody tr.warning, .table tbody tr.warning>td, .table tbody tr.warning>th, .table tbody tr .warning { background-color: #fcf8e3!important } .table tbody tr.danger, .table tbody tr.danger>td, .table tbody tr.danger>th, .table tbody tr .danger { background-color: #f2dede!important } .table .text-c th, .table .text-c td { text-align: center } .table .text-r th, .table .text-r td { text-align: right } .table th.text-l, .table td.text-l { text-align: left!important } .table th.text-c, .table td.text-c { text-align: center!important } .table th.text-r, .table td.text-r { text-align: right!important } </style> </code></pre> <p></head></p> <p><body><br> <div class="wrap" style="overflow: hidden;"><br> <div class="table-responsive"><br> <div id="chenkbox"><br> <table id="tabledraf1" style="width: 3000px;" class="table table-border table-bordered "><br> <tr><br> <th style="width: 20px;"><br> <input type="checkbox" name="selectall" id="" value="" /><br> </th><br> <th>订单号</th><br> <th>订单类型</th><br> <th>货主</th><br> <th>业务员</th><br> <th>发货人</th><br> <th>收货人</th><br> <th>货物名</th><br> <th>出发城市</th><br> <th>到达城市</th><br> <th>操作</th><br> <th>订单状态</th><br> <th>下单时间</th><br> <th>发货时间</th><br> <th>到达时间</th><br> <th>是否回单</th><br> <th>设备是否返回</th><br> <th>订单是否结算</th><br> <th>温度/位置</th><br> <th>订单金额</th><br> <th>异常扣款</th><br> <th>去税收入</th><br> <th>税前支出</th><br> <th>去税支出</th><br> <th>中转费</th><br> <th>仓储费</th><br> <th>去税利润</th><br> <th>税前利润</th><br> </tr><br> <tbody id="tbody"><br> <tr><br> <td>231</td><br> <td>231</td><br> <td>231</td><br> <td>231</td><br> <td>231</td><br> <td>231</td><br> <td>231</td><br> <td>231</td><br> <td>231</td><br> <td>231</td><br> <td>231</td><br> <td>231</td><br> <td>231</td><br> <td>231</td><br> <td>231</td><br> <td>231</td><br> <td>231</td><br> <td>231</td><br> <td>231</td><br> <td>231</td><br> <td>231</td><br> <td>231</td><br> <td>231</td><br> <td>231</td><br> <td>231</td><br> <td>231</td><br> <td>231</td><br> <td>231</td><br> </tr><br> </tbody></p> <pre><code> </table> <div id="table-draf"> <div class="bhead"></div> </div> </div> </div> </div> </code></pre> <p></body></p> <p></html></p> <script> Drag('tabledraf1') //拖动 function Drag(table) { var ochek = document.getElementById("chenkbox"), // otable0 = document.getElementById(tableflex), otable = document.getElementById(table), otody = otable.tBodies[0], oth = otody.getElementsByTagName("th"), otd = otody.getElementsByTagName("td"), box = document.getElementById("table-draf"), bhead = document.getElementsByClassName('bhead')[0], wrap = document.getElementsByClassName('wrap')[0], tab = document.getElementsByClassName('table-responsive')[0], lf = 0, oxo = '', oyo = '', arrn = []; var timer = setInterval(function() { lf = tab.scrollLeft console.log(lf) otable.style.left = -lf + 'px'; for (var i = 0; i < oth.length; i++) { oth[i].onmousedown = function(e) { var e = e || window.event, target = e.target || e.srcElement, thW = target.offsetWidth, maxl = ochek.offsetWidth - thW, rows = otable.rows, ckL = ochek.offsetLeft, disX = target.offsetLeft, otop = document.body.scrollTop, oxtop = tab.offsetTop, oin = this.cellIndex, _this = this; oxo = this.innerHTML; for (var i = 0; i < rows.length; i++) { var op = document.createElement("p"); if (rows[i].cells[this.cellIndex]) { op.innerHTML = rows[i].cells[this.cellIndex].innerHTML; } box.appendChild(op); }; for (var i = 0; i < oth.length; i++) { arrn.push(oth[i].offsetLeft); }; //console.log(arrn); box.style.display = "block"; box.style.width = thW + "px"; box.style.top = 8 + oxtop - otop + "px"; box.style.left = e.clientX - thW / 2 + "px"; document.onmousemove = function(e) { var e = e || window.event, target = e.target || e.srcElement, thW = target.offsetWidth; box.style.top = 8 + oxtop - otop + "px"; box.style.left = e.clientX - thW / 2 + "px"; document.onselectstart = function() { return false }; window.getSelection ? window.getSelection().removeAllRanges() : doc.selection.empty(); } document.onmouseup = function(e) { var e = e || window.event, opr = box.getElementsByTagName("p"), oboxl = e.clientX + lf; for (var i = 0; i < arrn.length; i++) { if (arrn[i] < oboxl) { var index = i; } }; // oyo = oth[index].innerHTML; // oth[index].innerHTML = oxo; // oth[oin].innerHTML = oyo; oyo = oth[index].innerHTML; oth[index].innerHTML = oxo; oth[index].innerHTML = oyo; // console.log(index) // for(var i = 0; i < rows.length; i++) { // rows[i].cells[_this.cellIndex].innerHTML = ""; // rows[i].cells[_this.cellIndex].innerHTML = rows[i].cells[index].innerHTML; // rows[i].cells[index].innerHTML = ""; // rows[i].cells[index].innerHTML = opr[i].innerHTML; // }; for (var i = 0; i < rows.length; i++) { if (rows[i].cells[_this.cellIndex]) { rows[i].cells[_this.cellIndex].innerHTML = ""; rows[i].cells[_this.cellIndex].innerHTML = rows[i].cells[index].innerHTML; }; if (rows[i].cells[index]) { rows[i].cells[index].innerHTML = ""; rows[i].cells[index].innerHTML = opr[i].innerHTML; }; }; box.innerHTML = ""; arrn.splice(0, arrn.length); box.style.display = "none"; document.onmousemove = null; document.onmouseup = null; document.onselectstart = function() { return false }; } } oth[0].onmousedown = function() { return false; } }; }, 10) } </script>
表格列交换，拖拽改变列宽效果