`

可拖动单元格的JavaScript示例

javascript 
阅读更多 
<html>
<head>
<title>拖动行测试</title>
<script language="javascript">
var beginMoving=false;
function MouseDownToMove(obj){
obj.style.zIndex=1;
obj.mouseDownY=event.clientY;
obj.mouseDownX=event.clientX;
beginMoving=true;
obj.setCapture();
}

function MouseMoveToMove(obj){
if(!beginMoving) return false;
obj.style.top = (event.clientY-obj.mouseDownY);
obj.style.left = (event.clientX-obj.mouseDownX);
}

function MouseUpToMove(obj){
if(!beginMoving) return false;
obj.releaseCapture();
obj.style.top=0;
obj.style.left=0;
obj.style.zIndex=0;
beginMoving=false;
var tempTop=event.clientY-obj.mouseDownY;
var tempRowIndex=(tempTop-tempTop%25)/25;
if(tempRowIndex+obj.rowIndex <0 )tempRowIndex=-1;
else tempRowIndex=tempRowIndex+obj.rowIndex;
if(tempRowIndex >= obj.parentElement.rows.length-1) tempRowIndex = obj.parentElement.rows.length-1;
obj.parentElement.moveRow(obj.rowIndex,tempRowIndex);
}
</script>

</head>

<body>
<table id="filelistTab" cellspacing="0" cellpadding="2" border=1>
<tr>
<td class="gridtitle" style="WIDTH: 40px">列一</td>
<td class="gridtitle" style="WIDTH: 100px">列二</td>
<td class="gridtitle" style="WIDTH: 110px">列三</td>
</tr>

<tr id="1" title="拖动行可以进行排序" style="cursor:move ;position:relative;" onmousedown='MouseDownToMove(this)' onmousemove='MouseMoveToMove(this)' onmouseup='MouseUpToMove(this);'>
<td class="gridtitle"><input class="text" id="group1" style="WIDTH: 30px" type="text" readonly value="1" /></td>
<td class="gridtitle">
11111111111111111111
</td>
<td class="gridtitle"><input class="text" id="fn1" readOnly type="text" style="width:100px" value="11111111111111111111" /></td>
</tr>

<tr id="2" title="拖动行可以进行排序" style="cursor:move ;position:relative;" onmousedown='MouseDownToMove(this)' onmousemove='MouseMoveToMove(this)' onmouseup='MouseUpToMove(this);'>
<td class="gridtitle"><input class="text" id="group2" style="WIDTH: 30px" type="text" readonly value="2" /></td>
<td class="gridtitle">
222222222222222222222
</td>
<td class="gridtitle"><input class="text" id="fn2" readOnly type="text" style="width:100px" value="22222222222222222222222" /></td>
</tr>

<tr id="3" title="拖动行可以进行排序" style="cursor:move ;position:relative;" onmousedown='MouseDownToMove(this)' onmousemove='MouseMoveToMove(this)' onmouseup='MouseUpToMove(this);'>
<td class="gridtitle"><input class="text" id="group3" style="WIDTH: 30px" type="text" readonly value="3" /></td>
<td class="gridtitle">
3333333333333333333333
</td>
<td class="gridtitle"><input class="text" id="fn3" readOnly type="text" style="width:100px" value="333333333333333" /></td>
</tr>

<tr id="4" title="拖动行可以进行排序" style="cursor:move ;position:relative;" onmousedown='MouseDownToMove(this)' onmousemove='MouseMoveToMove(this)' onmouseup='MouseUpToMove(this);'>
<td class="gridtitle"><input class="text" id="group4" style="WIDTH: 30px" type="text" readonly value="4" /></td>
<td class="gridtitle">
444444444444444444444
</td>
<td class="gridtitle"><input class="text" id="fn4" readOnly type="text" style="width:100px" value="4444444444444444444444444444" /></td>
</tr>

<tr id="5" title="拖动行可以进行排序" style="cursor:move ;position:relative;" onmousedown='MouseDownToMove(this)' onmousemove='MouseMoveToMove(this)' onmouseup='MouseUpToMove(this);'>
<td class="gridtitle"><input class="text" id="group5" style="WIDTH: 30px" type="text" readonly value="5" /></td>
<td class="gridtitle">
55555555555555555555555
</td>
<td class="gridtitle"><input class="text" id="fn5" readOnly type="text" style="width:100px" value="555555555555555555555" /></td>
</tr>

<tr id="6" title="拖动行可以进行排序" style="cursor:move ;position:relative;" onmousedown='MouseDownToMove(this)' onmousemove='MouseMoveToMove(this)' onmouseup='MouseUpToMove(this);'>
<td class="gridtitle"><input class="text" id="group6" style="WIDTH: 30px" type="text" readonly value="6" /></td>
<td class="gridtitle">
6666666666666666666666666
</td>
<td class="gridtitle"><input class="text" id="fn6" readOnly type="text" style="width:100px" value="666666666666666666666" /></td>
</tr>

</table>
</body>
</html>
分享到：
| 可调节列宽的JavaScript示例
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    Sigma Grid

    Sigma Grid是一个采用纯javascript开发的Ajax数据表格。特性包括： 1.基于CSS控制外观，内置Classic、Vista、Mac、XP四种风格。（可以自己改变风格哦） 2.提供单元格直接编辑功能，可以自定义编辑器，为单元格设置...

    AJAX基础概念、核心技术与典型案例(内涵动态实例)

    RicoDrag 使用Open Rico实现可拖拽的层 WebSitetestdojo 使用dojo组件实现卷帘效果的div隐藏 第16章（/C16/） 留言板源代码 所有留言板实例的源代码 数据库备份 留言板数据所需要的数据库 ...

    ExtAspNet v2.2.1 （2009-4-1） 值得一看

    -增加示例(iframe/parent_postback_run3.aspx)，如何通过简单的Javascript代码回发父页面(feedback:eroach)。 -修正一些书写错误(feedback:bmck)。 -从Region控件中删除SplitColor属性，增加CollapseMode, ...

    Ext Js权威指南(.zip.001

    1.2.4　在javascript中使用json / 4 1.2.5　在.net中使用json / 8 1.2.6　在java中使用json / 12 1.2.7　更多有关json的信息 / 15 1.3　ext js 4概述 / 15 1.4　ext js的开发工具的获取、安装与配置介绍 / 18 1.4.1...

    ExtAspNet_v2.3.2_dll

    -增加示例(iframe/parent_postback_run3.aspx)，如何通过简单的Javascript代码回发父页面(feedback:eroach)。 -修正一些书写错误(feedback:bmck)。 -从Region控件中删除SplitColor属性，增加CollapseMode, ...

    d3-svg-legend:从d3比例创建的简单图例

    根据d3比例创建的简单且可拖动的图例。 您可以查看。 图例具有以下选项： 传奇。 inputScale （d3.scale）将图例与d3比例相关联。 目前仅使用阈值和顺序量表进行了测试。 传奇。 cellWidth （ number ）每个图例...

    AJAX 源码范例

    原书附带光盘文件 第2章 02/ 基于Ajax的留言板示例 第3章 03/3.1.3.html JavaScript在Ajax中的作用范例 03/3.4.6.html 加入注释，实现九九乘法表 03/3.4.11.html 使用逻辑表达式...

    fe.component-simple-grid

    （不支持直接编辑网格中的数据） 网格区域提供无限滚动（垂直方向）处理大数据，可通过鼠标拖动调整列宽。 特征 大数据渲染支持 支持添加/删除单行或多行 支持网格单元格和边框的着色 提供列宽调整功能 提供列合并...

    Eclipse_Swt_Jface_核心应用_部分19

    9.4 可拖动的工具栏（CoolBar和CoolItem） 161 9.4.1 带有下拉选项的工具栏 163 9.4.2 常用的方法 163 9.5 系统托盘（Tray和TrayItem） 164 9.6 滑动组件 167 9.6.1 滑块（Slider） 167 9.6.2 刻度条...

    layui-soul-table:layui-table 表头筛选、列顺序调整、列快速隐藏、excel导出等

    9.右侧固定列 列宽拖动改到单元格左侧 效果 1.表头筛选效果 2.编辑筛选效果 筛选明代姓张的 或 唐代姓李的的诗词 3.拖动列调整顺序、隐藏显示列 左右拖动调整顺序，鼠标移出表格后松开--快速隐藏列 4.子表 快速上手 ...

    vue-easytable:基于Vue的表格

    API和示例（如果访问不了说明被墙了，我也很无奈......）特征 支持单元格合并（colSpan和rowSpan） 支持复选框的选择 页脚摘要 条件过滤器 汇出Excel 导出PDF 行扩展 垂直列拖动 安装 npm install vue - easytable -...

    ko-grid:用于显示表格数据的可扩展 UI 组件

    ko-grid ko-grid 是一个可扩展的 UI 组件，用于显示表格数据。 它是基于的，其绑定名称只是grid 。 如果您想了解 ko-grid 的实际运行情况，可以查看一些。 相应的源位于。 要开始，请查看中的简短、自包含示例。特征...

    asp.net知识库

    采用XHTML和CSS设计可重用可换肤的WEB站点 asp.net的网址重定向方法的比较：面向搜索引擎友好 也谈 ASP.NET 1.1 中 QueryString 的安全获取写法 ASP.NET运行模式：PageHandlerFactory 利用搜索引擎引用来高亮页面...

    eWebEditor说明文档

    2.6.17 拖动调整单元格宽高 ..................................................... 68 2.7 文件上传及导入.............................................................. 69 2.7.1 远程文件自动上传 .............

Magicbox
Global site tag (gtag.js) - Google Analytics