javascript 表格拖动列不用怕滚动条

最新推荐文章于 2021-02-02 16:32:18 发布
最新推荐文章于 2021-02-02 16:32:18 发布
阅读量825 收藏
点赞数
分类专栏： 技术类 文章标签： javascript null function table variables initialization
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/wslyy99/article/details/1895850
版权

javascript  表格拖动列不用怕滚动条

<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<HTML>
<HEAD>
<META http-equiv="Content-Type" content="text/html; charset=gb2312">
<TITLE>拖动</TITLE>
<STYLE>
td{width:20%;height:20px;border-bottom:1px solid black;border-right:1px solid black;cursor:default;}
div{font-size:13px;}
th{height:20px;font-size:12px;font-weight:normal;border-bottom:2px solid black;background-color:#CCCCCC}
table{border:1px solid black;font-size:13px;}
</STYLE>
<script language="javascript">
   var tbody, headRow;
var bDragMode = false;
var objDragItem;
var arrHitTest = new Array();
var iArrayHit = false;
var ColumnCount = null;
var mustRefresh = false;
var dragColor=null;
var hitColor=null;
var HasTopMostPager=null;
 var PowerTable=null;
//
// Init function.. Fills out variables with data
// loaded with oncontentready.
//将table初始化
function initDragTable(table)
{

var i;

    PowerTable=table;

 if (dragColor == null)
  dragColor = "white";
 if (hitColor == null)
  hitColor = "lightblue";

 // get TBODY - take the first TBODY for the table
 tbody = PowerTable.tBodies(0);

 if (!tbody) return;

 // get THEAD - take the unique THEAD for the table
 var click = PowerTable.tHead;
 if (!click)  return;


 // Determine the row to use (read from HasPager)
 if (HasTopMostPager == "true")
  headRow = click.children[1];
 else
  headRow = click.children[0];

  if (headRow.tagName != "TR") return;

  headRow.runtimeStyle.cursor = "hand"; //"move";
  ColumnCount = headRow.children.length;

  for(i=0; i < ColumnCount ; i++)
  {
    arrHitTest[i] = new Array();
  }


  var cx=0;
  var cy=0;
  var c;
  defaultTitleColor = headRow.children[0].currentStyle.backgroundColor;

  for (i=0; i<ColumnCount ; i++) {

 var clickCell = headRow.children[i];
 clickCell.selectIndex = i;
 c = clickCell.offsetParent;


 if (cx == 0 && cy == 0)
 {
  while (c.offsetParent != null) {
                  cy += c.offsetTop;
                  cx += c.offsetLeft;
                  c = c.offsetParent;
  }
 }

 arrHitTest[i][0] = cx + clickCell.offsetLeft;
 arrHitTest[i][1] = cy + clickCell.offsetTop;
 arrHitTest[i][2] = clickCell;
 arrHitTest[i][3] = cx + clickCell.offsetLeft + clickCell.clientWidth;

 clickCell.attachEvent("onmousedown",onMouseDown);
  }

  PowerTable.attachEvent("onmousemove",onMouseMove);
  PowerTable.attachEvent("onmouseup",onMouseUp);

  ///
  if (arrHitTest[0][0] == arrHitTest[0][3])
 mustRefresh = true;
}


function InitHeader()
{
  var cx=0;
  var cy=0;
  var c;

  for (i=0; i<ColumnCount ; i++) {

 var clickCell = headRow.children[i];
 clickCell.selectIndex = i;
 c = clickCell.offsetParent;

 if(cx == 0 && cy == 0 )
 {
  while (c.offsetParent != null) {
                  cy += c.offsetTop;
                  cx += c.offsetLeft;
                  c = c.offsetParent;
  }
 }

 arrHitTest[i][0] = cx + clickCell.offsetLeft;
 arrHitTest[i][1] = cy + clickCell.offsetTop;
 arrHitTest[i][2] = clickCell;
 arrHitTest[i][3] = cx + clickCell.offsetLeft + clickCell.clientWidth;

  }
}

function ChangeHeader(iChange)
{
 for(var y = 0; y < arrHitTest.length; y++)
 {
 if (arrHitTest[y][2].currentStyle.backgroundColor == hitColor)
  arrHitTest[y][2].style.backgroundColor = defaultTitleColor;
 }

 if(iChange == "-1") return;

 arrHitTest[iChange][2].style.backgroundColor = hitColor;
}

function onMouseUp(e)
{
 if(!bDragMode) return;
 bDragMode = false;

 var iSelected = objDragItem.selectIndex;

 objDragItem.removeNode(true);
 objDragItem = null;

 ChangeHeader(-1);

 if( (iArrayHit - 1) < 0 || iSelected < 0) return; // default faliure

 // iSelected is the 0-based index of the column being moved
 // (iArrayHit-1) is the 0-based index of the column being replaced
 CopyRow(iSelected, (iArrayHit - 1) );

 // Reset our variables
 iSelected = 0;
 iArrayHit = -1;
}

function onMouseDown(e)
{
 // If the grid is contained in an invisible panel (other DHTML stuff)
 // the initialization step must be repeated to take real values
 if( mustRefresh) {
  InitHeader();
  mustRefresh = false;
 }


 bDragMode  = true;
 var src  = e.srcElement;
 var c  = e.srcElement;

 while (src.tagName != "TD")
  src = src.parentElement;

 // Create our header on the fly
 objDragItem = document.createElement("DIV");
 objDragItem.innerHTML  = src.innerHTML;
 objDragItem.style.height = src.offsetParent.clientHeight;
 objDragItem.style.width  = src.clientWidth;
 objDragItem.style.background = dragColor;
 objDragItem.style.fontColor = src.currentStyle.fontColor;
 objDragItem.style.position  = "absolute";
 objDragItem.style.filter  = "progid:DXImageTransform.Microsoft.Alpha(opacity=75)";
 objDragItem.selectIndex  = src.selectIndex;
        objDragItem.style.border  = "1 solid black";
 while (c.offsetParent != null)
        {
  objDragItem.style.y += c.offsetTop;
  objDragItem.style.x += c.offsetLeft;
  c = c.offsetParent;
 }

 objDragItem.style.borderStyle = "dashed";
  objDragItem.style.borderWidth = "1px";
  objDragItem.style.display = "none";

 src.insertBefore(objDragItem);
}

function onMouseMove(e)
{
 if(!bDragMode || !objDragItem) return;

 // If we aren't dragging or our object is null, we return

 // Hardcoded value for height difference
 var midWObj = objDragItem.style.posWidth / 2;
 var midHObj = 12;

 // Save mouse's position in the document
     var intTop = e.clientY +document.body.scrollTop;
     var intLeft = e.clientX + document.body.scrollLeft;


 var cx=0,cy=0;
 var elCurrent = objDragItem.offsetParent;
 if (elCurrent != null)
 {
          while (elCurrent.offsetParent != null) {
                  cx += elCurrent.offsetTop;
                  cy += elCurrent.offsetLeft;
                  elCurrent = elCurrent.offsetParent;
          }
 }

      objDragItem.style.pixelTop  = intTop  - cx - midHObj;
      objDragItem.style.pixelLeft = intLeft - cy - midWObj;


 if(objDragItem.style.display == "none")
  objDragItem.style.display = "";

 iArrayHit = CheckHit(intTop , intLeft , e);

 e.cancelBubble = false;
 e.returnValue = false;
}

function CheckHit(x,y,e)
{
 midWObj = objDragItem.style.posWidth / 2;
 midHObj = 12;


 for(var i=0; i < ColumnCount; i++)
 {
  if( (y) > (arrHitTest[i][0]) && (y) < (arrHitTest[i][3] ))
  {
   ChangeHeader(i);
   return i + 1;
  }
 }
 return -1;
}

//
// Copy from row to row.. Does the Header also.
//
function CopyRow(from, to)
{
 if(from == to) return;


 var origfrom = from;
 var origto = to;
 var iDiff = 0;

 if( from > to )
 {

  iDiff = from - to;

  var saveObj  = headRow.children[from].innerHTML;
  var saveWidth  = headRow.children[from].width;

  for(var i = 0 ; i < iDiff; i++)
  {
   headRow.children[from].innerHTML = headRow.children[from - 1].innerHTML;
   headRow.children[from].width = headRow.children[from - 1].width;
   from--;
  }
  headRow.children[to].innerHTML  = saveObj;
  headRow.children[to].width = saveWidth;
 }
 else
 {

  iDiff = to - from;

  var saveObj = headRow.children[from].innerHTML;
  var saveWidth  = headRow.children[from].width;

  for(var i = 0 ; i < iDiff; i++)
  {
   headRow.children[from].innerHTML = headRow.children[from + 1].innerHTML;
   headRow.children[from].width = headRow.children[from + 1].width;
   from++;
  }

  headRow.children[to].innerHTML  = saveObj;
  headRow.children[to].width = saveWidth;
 }

 for(var i = 0 ; i < headRow.children.length; i++)
   headRow.children[i].selectIndex = i;

 InitHeader();
 for ( var iRowInsert = 0 ; iRowInsert < tbody.rows.length; iRowInsert++ )
 {
  from = origfrom;
  to = origto;
  if( from > to )
  {
   iDiff = from - to;
   var saveObj;
   try {
    saveObj = tbody.children[iRowInsert].children[from].innerHTML;
   } catch(e) { saveObj = null; }
   for(var i = 0 ; i < iDiff; i++)
   {
    try {
     tbody.children[iRowInsert].children[from].innerHTML = tbody.children
[iRowInsert].children[from - 1].innerHTML;
     from--;
    } catch(e) {}
   }
   if (saveObj != null)
    tbody.children[iRowInsert].children[to].innerHTML = saveObj;
  }
  else
  {
   iDiff = to - from;
   var saveObj;
   try {
    saveObj = tbody.children[iRowInsert].children[from].innerHTML;
   } catch(e) {}
   for(var i = 0 ; i < iDiff; i++)
   {
    try {
     tbody.children[iRowInsert].children[from].innerHTML = tbody.children
[iRowInsert].children[from + 1].innerHTML;
     from++;
    } catch(e) {}
   }
   try {
    tbody.children[iRowInsert].children[to].innerHTML = saveObj;
   } catch(e) {}
  }
 }

 

  var buf = "";
  for(var i=0; i<headRow.children.length; i++)
  {
   var td = headRow.children[i];
   tmp = td.innerHTML;
   pos = tmp.indexOf("<");
   if (pos > 0)
    tmp = tmp.substring(0, pos);
   else
   {
    if (pos == 0)
     tmp = td.innerText;
   }

   buf += tmp;
   if (i < headRow.children.length-1)
    buf += ",";
  }}
</script>
<script language="javascript">
function init()
{
//注册可拖拽表格
new initDragTable("tableId");
}
</script>
</HEAD>
<BODY οncοntextmenu="return false;" οnlοad="initDragTable(tableId)">
<TABLE id="tableId"  align="center" cellpadding="0" cellspacing="0">
<thead>
<TR>
 <TD>Java</TD>
 <TD>Java One </TD>
 <TD>JBuilder</TD>
 <TD>Stuts</TD>
 <TD>Java</TD>
 <TD>Java One </TD>
 <TD>JBuilder</TD>
 <TD>Stuts</TD>
 <TD>Java</TD>
 <TD>Java One </TD>
 <TD>JBuilder</TD>
 <TD>Stuts</TD>
 <TD>Java</TD>
 <TD>Java One </TD>
 <TD>JBuilder</TD>
 <TD>Stuts</TD>
 <TD>Java</TD>
 <TD>Java One </TD>
 <TD>JBuilder</TD>
 <TD>Stuts</TD>
 <TD>Java</TD>
 <TD>Java One </TD>
 <TD>JBuilder</TD>
 <TD>Stuts</TD>
 <TD>Java</TD>
 <TD>Java One </TD>
 <TD>JBuilder</TD>
 <TD>Stuts</TD>
 <TD>Java</TD>
 <TD>Java One </TD>
 <TD>JBuilder</TD>
 <TD>Stuts</TD>
 <TD>Java</TD>
 <TD>Java One </TD>
 <TD>JBuilder</TD>
 <TD>Stuts</TD>
 <TD>Java</TD>
 <TD>Java One </TD>
 <TD>JBuilder</TD>
 <TD>Stuts</TD>
 <TD>Java</TD>
 <TD>Java One </TD>
 <TD>JBuilder</TD>
 <TD>Stuts</TD>
 <TD>Java</TD>
 <TD>Java One </TD>
 <TD>JBuilder</TD>
 <TD>Stuts</TD>
</TR>
</thead>
 <tbody>
<TR>
 <TD>Java</TD>
 <TD>Java One </TD>
 <TD>JBuilder</TD>
 <TD>Stuts</TD>
 <TD>Java</TD>
 <TD>Java One </TD>
 <TD>JBuilder</TD>
 <TD>Stuts</TD>
 <TD>Java</TD>
 <TD>Java One </TD>
 <TD>JBuilder</TD>
 <TD>Stuts</TD>
 <TD>Java</TD>
 <TD>Java One </TD>
 <TD>JBuilder</TD>
 <TD>Stuts</TD>
 <TD>Java</TD>
 <TD>Java One </TD>
 <TD>JBuilder</TD>
 <TD>Stuts</TD>
 <TD>Java</TD>
 <TD>Java One </TD>
 <TD>JBuilder</TD>
 <TD>Stuts</TD>
 <TD>Java</TD>
 <TD>Java One </TD>
 <TD>JBuilder</TD>
 <TD>Stuts</TD>
 <TD>Java</TD>
 <TD>Java One </TD>
 <TD>JBuilder</TD>
 <TD>Stuts</TD>
 <TD>Java</TD>
 <TD>Java One </TD>
 <TD>JBuilder</TD>
 <TD>Stuts</TD>
 <TD>Java</TD>
 <TD>Java One </TD>
 <TD>JBuilder</TD>
 <TD>Stuts</TD>
 <TD>Java</TD>
 <TD>Java One </TD>
 <TD>JBuilder</TD>
 <TD>Stuts</TD>
 <TD>Java</TD>
 <TD>Java One </TD>
 <TD>JBuilder</TD>
 <TD>Stuts</TD>
</TR>
 </tbody>
</TABLE>
</BODY>
</HTML> 

给力地板油
关注
专栏目录
vue项目中使用el-table表格动态拖拽数据，并根据拖拽滚动条也下拉
weixin_45654455的博客
08-14 1301
但是如果数据过多，表格会出现滚动条这时候拖拽就只能一个个的往下拖拽，所以针对这个问题优化了随着鼠标拖动滚动条也往下拖动。绑定row-key为后端的拖拽顺序。在表格上监听鼠标点击，抬起和移动事件。1 使用sortablejs插件。项目中实现动态拖拽表格数据。然后使用表格的ref的监听。在mounted中引入。
解决 | iview低版本实现表格拖拽，滚动条列宽计算问题
aningde的博客
02-18 973
文 / 景朝霞 来源公号 / 朝霞的光影笔记 ID / zhaoxiajingjing 如果大佬觉得我的方案太low，请打脸轻一点~ 如果大佬有更好的方案，请不吝赐教~ 0 / 需求 "iview": "2.13.0"由于一些原因，版本并没有升级【os：不要问我什么原因~】。 项目中表格实现的功能： 普通表格 固定列 自定义选择展示列 合并行 合并列 合并表头 由于列数较多，用户想要自...
jquery实现table拖拽列效果
12-27
用jquery实现table拖拽列功能，可动态改变表格列宽度，并且实现table表格100%的问题，如果列缩小，则自动拉伸最后一列以实现table100%的效果，如果拉伸长度比原长度大，则显示x滚动条。
JS组件系列——Bootstrap Table 表格行拖拽
weixin_33896069的博客
10-30 325
前言：之前一直在研究DDD相关知识，好久没更新JS系列文章了。这两天做了一个简单的业务需求，觉得效果还可以，今天在这里分享给大家，欢迎拍砖~~ 一、业务需求及实现效果 项目涉及到订单模块，那天突然接到一个需求，说是两种不同状态的订单之间要实现插单的效果，页面上呈现方式是：左右两个Table，左边Table里面是状态为1的订单，右边Table里面是状态为2订单，左边Table里面的行数据拖动到右...
JS动态拖动表格实现
weixin_30341745的博客
03-24 540
<HTML><HEAD><META http-equiv="Content-Type" content="text/html; charset=gb2312"><TITLE>JS动态拖动表格实现</TITLE><STYLE>td{width:20%;height:20px;border-bottom:1px solid bla...
鼠标拖动表格 -- 滚动条
shifengkuaile的专栏
08-12 240
&lt;html&gt; &lt;head&gt; &lt;script src="common/js/jquery.js" type="text/javascript"&gt;&lt;/script&gt; &lt;script type="text/javascript"&gt; $(function(){ $("#bdiv&quo
js实现像excel表格锁定功能，拖动滚动条指定锁住的列不滚动
01-09
js实现像excel表格锁定功能，拖动滚动条指定锁住的列不滚动，内容使用的是table表格 使用代码： var Options = { table : "tb", width : 600, height : 300, rows : 1, cells : 2 } new Fixed(Options);
javascript模拟滚动条实现代码
12-02
JavaScript 模拟滚动条是一种常见的前端技术，它允许开发者在没有浏览器原生滚动条的情况下创建自定义滚动效果。以下是对标题和描述中所涉及的知识点的详细解释： 1. **CSS 属性应用**： - `height` 和 `width`：...
element的el-table中记录滚动条位置的示例代码
10-16
在一些业务场景中，可能需要记录表格的滚动条位置，比如在实现分页功能时，希望在切换分页后仍然保持之前的滚动位置。在本篇示例代码中，将重点介绍如何在Element UI的el-table组件中记录和恢复滚动条位置。 通常...
js表格拖拽
12-31
使用纯js完成了table(表格)列的拖拽；同时支持列位置的调整。
javascript实现表格的单元格拖动排序
09-15
javascript实现表格的单元格拖动排序，对实现图片的拖动排序有启发
js实现table列头拖拽
10-19
js实现table列头拖拽，。。。。。。
拖动单元格改变列宽或行高
02-07
oDragTable.js 拖动表格单元格改变列宽或行高，兼容全浏览器，一句代码调用，原创代码，下载文件中包含JS源代码和示例代码。
JQ JS javascript 拖拽 排序功能 列表排序 菜单排序 表格排序
04-17
JQ JS javascript 拖拽 排序功能 列表排序 菜单排序 表格排序
表格拖动效果js
iteye_9666的博客
10-28 194
window.onload=function(){ drag(document.getElementById('drag1')); drag(document.getElementById('drag2')); drag(document.getElementById('drag3')); drag(document.getElementById('drag4')); ...
js 表格拖动改变高和宽
上善若水
08-03 744
[code="html"] .resizeDivClass { position:relative; width:4; z-index:1; left:expression(this.parentElement.offsetWidth - 3); cursor:e-resize; } ....
el-table 表格行拖动 sortable.js
没有如果
02-02 809
首先 拖动使用sortable.js 插件 文档http://www.sortablejs.com/ 1、引入js 我选择cdn引入 <script src="https://cdn.bootcdn.net/ajax/libs/Sortable/1.13.0/Sortable.min.js"></script> 2、html代码 <el-table :data="tableData"> <el-table-column prop.
js 可拖拽排序、插入的表格
Fbote
11-04 169
程序源码，为了一次性全粘贴把js全复制过来，很多和此无关 [b][color=red]以下为很久以前写的，时至今日可以用 jQuery 以更少的代码完成更多的功能。[/color][/b] 显示如图： [img]http://dl.iteye.com/upload/attachment/164307/4f03d783-e8c1-3960-95f1-f5dd2357b2...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值