JAVASCRIPT+DHTML实现表格拖动
自已做的,本来想在网上找前辈们做的,可是总找不到这种例子,要么找出来的太复杂,
要么就没法用,索性自己写了一个.看看还可以用!贡献出来,估计和我一样的菜鸟用的着!
<html>
<style>
body{
font-size:9pt;
}
table,th,td{
font-size:9pt;
}
.lsitTalbe{
table-layout:fixed;
width:30%;
border-collapse:collapse;
border-color:#507010;
color:#003300;
}
.pageda{
font-family:Webdings;
font-size:12pt;
color:#CCCCCC;
cursor:default;
}
.pageua{
font-family:Webdings;
font-size:12pt;
}
.even{
background:#e8f8d0;
}
.odd{
background:#f8fcf0;
}
.header{
background:a0dc40;
color:003300;
}
</style>
<head>
<TITLE>JAVASCRIPT+DHTML实现表格拖动DEMO</TITLE>
<META NAME="Generator" CONTENT="EditPlus">
<META NAME="Author" CONTENT="Hunk Dong">
</head>
<body>
<br>
JAVASCRIPT+DHTML实现表格拖动 按住 <b>列1</b> 即可拖动
<hr width="30%" align="left">
<table class="lsitTalbe" border="1" cellspacing="1" cellpadding="1" onmousedown="mousedown()" onmouseup="mouseup()" onmousemove="mousemove()" >
<tr class="header">
<th width="10%">列1</th>
<th width="10%">列2</th>
<th width="40%">列3</th>
<th width="40%">列4</th>
<tr>
<tr class="even" id="tr_1">
<TD style="cursor:move" title="按住可拖动">1</TD>
<TD ><INPUT class=inputStyle id=chkTaskItem_3 type=checkbox value=3 name=chkTaskItem></TD>
<TD ><INPUT class=inputStyle id=txtTaskName_3 type=txtTaskName size=25 name=txtTaskName value="test1"></TD>
<TD >test1</TD>
</tr>
<tr class="odd" id="tr_2">
<TD style="cursor:move" title="按住可拖动">2</TD>
<TD ><INPUT class=inputStyle id=chkTaskItem4 type=checkbox value=4 name=chkTaskItem></TD>
<TD ><INPUT class=inputStyle id=txtTaskName_4 type=txtTaskName size=25 name=txtTaskName value="test2"></TD>
<TD >test2</TD>
</tr>
<tr class="even" id="tr_3">
<TD style="cursor:move" title="按住可拖动">3</TD>
<TD ><INPUT class=inputStyle id=chkTaskItem_5 type=checkbox value=5 name=chkTaskItem></TD>
<TD ><INPUT class=inputStyle id=txtTaskName_5 type=txtTaskName size=25 name=txtTaskName value="test3"></TD>
<TD >test3</TD>
</tr>
</table>
</body>
</html>
<script language="javaScript">
var srcRowIndex;
var targetRowIndex;
var bDragMode ;
var objDragItem ;
var el;
function window.onload(){
initAdditionalElements();
}
function initAdditionalElements(){
objDragItem = document.createElement("DIV");
with(objDragItem.style){
backgroundColor = "buttonshadow";
cursor = "default";
position = "absolute";
filter = "progid:DXImageTransform.Microsoft.Alpha(style=0,opacity=50)";
zIndex = 3001;
display ="none";
}
window.document.body.insertAdjacentElement("afterBegin", objDragItem);
}
function mousedown(){
el = window.event.srcElement;
if(el==null||el.tagName!="TD") return false;
if(el.cellIndex!=0 || el.parentNode.rowIndex<2) return false;
srcRowIndex = el.parentElement;
bDragMode = true ;
if (objDragItem!=null){
with(objDragItem){
innerHTML = el.parentElement.innerHTML;
style.height = el.parentElement.offsetHeight;
style.width = el.parentElement.offsetWidth;
}
}
el.setCapture();
}
function mouseup(){
if(el==null || el.cellIndex!=0 || el.parentNode.rowIndex<2) return false;
targetRowIndex = el.parentElement;
srcRowIndex.swapNode(targetRowIndex);
bDragMode = false ;
objDragItem.style.display ="none";
}
function mousemove(){
el = window.event.srcElement;
window.event.cancelBubble = false;
cliX = window.event.clientX;
cliY = window.event.clientY;
if(bDragMode && objDragItem!=null){
with(objDragItem){
style.display ="";
style.posLeft = cliX +1;
style.posTop = cliY - offsetHeight/2;
}
}
}
</script>
直接Copy下来就可以用,欢迎大家一起讨论
JAVASCRIPT+DHTML实现表格拖动的更多相关文章
- JQuery 表格拖动调整列宽效果
类似于桌面程序中的表格拖动表头的效果,当鼠标停留在表头边框线上时,鼠标会变成表示左右拖动的形状,接着拖动鼠标,会在表格中出现一条随鼠标移动的竖线,最后放开鼠标,表格列宽会被调整.最近比较空闲,便自己动 ...
- JavaScript动态改变表格单元格内容的方法
本文实例讲述了JavaScript动态改变表格单元格内容的方法.分享给大家供大家参考.具体如下: JavaScript动态改变表格单元格的内容,下面的代码通过修改单元格的innerHTML来修改单元格 ...
- JavaScript 创建动态表格
JavaScript 创建动态表格 版权声明:未经授权,严禁转载! 案例代码 <div id="data"></div> <script> va ...
- javascript生成表格增删改查 JavaScript动态改变表格单元格内容 动态生成表格 JS获取表格任意单元格 javascript如何动态删除表格某一行
jsp页面表格布局Html代码 <body onload="show()"> <center> <input type="text" ...
- HTML & CSS & JavaScript 从一个表格到一个灰阶颜色表（目录）
HTML & CSS & JavaScript 从一个表格到一个灰阶颜色表 01 HTML & CSS & JavaScript 从一个表格到一个灰阶颜色表 02 HT ...
- HTML & CSS & JavaScript 从一个表格到一个灰阶颜色表 01
工具1:HBuilder X 1.9.9.20190522 工具2:火狐浏览器 67.0.4 (64 位) 在开始之前,你需要了解一些基本的知识,不要求你能掌握,但是了解一下还是有益的: HTML 简 ...
- HTML & CSS & JavaScript 从一个表格到一个灰阶颜色表 03
工具1:HBuilder X 1.9.9.20190522 工具2:火狐浏览器 67.0.4 (64 位) 其实,我还想使用表格,做一个这样的颜色表,如下图所示: 如果按照之前的做法,把每一种颜色都列 ...
- HTML & CSS & JavaScript 从一个表格到一个灰阶颜色表 02
工具1:HBuilder X 1.9.9.20190522 工具2:火狐浏览器 67.0.4 (64 位) 其实,我想使用表格,做一个这样的颜色表,如下图所示: 例 3:我们参照上图,基于上一个例子, ...
- HTML & CSS & JavaScript 从一个表格到一个灰阶颜色表 04
工具1:HBuilder X 1.9.9.20190522 工具2:火狐浏览器 67.0.4 (64 位) 目前,我们已经将一些行和列插入到表格中,并设置单元格的背景颜色,显示 RGB 值等. 例 7 ...
随机推荐
- gedit如何使用代码片段
gedit的片段插件 1 打开这个插件 2 以HTML为例,我们看到触发器是doctype 3则我在编辑一个HTML文档的时候,先输入doctype,再按Tab键,将会自动提示,我选择即可插入 ...
- 外媒关注：中国版Twitter新浪微博推出微米对抗微信
Sina, China’s answer to Twitter, enters the mobile messaging battle with its own app 中国版Twitter新浪,用自 ...
- Quartz.Net的使用（简单配置方法）定时任务框架
Quartz.dll 安装nuget在线获取dll包管理器,从中获取最新版 Quartz.Net是一个定时任务框架,可以实现异常灵活的定时任务,开发人员只要编写少量的代码就可以实现“每隔1小时执行”. ...
- getLastSql（）用法
getLastSql()用法 $User = M("User"); // 实例化User对象 $User->find(1); echo $User->getLastSq ...
- python字符串操作大全
1.去空格 strip() >>> s = 'a b c d ' >>> s.strip() 'a b c d' 2.lstrip() 方法用于截掉字符串左边的空格 ...
- 如何配置 Oracle VirtualBox 中的客户机与物理机网络
当你在 Oracle VirtualBox 虚拟机软件 中安装了各种操作系统时,你可能需要实现物理机与虚拟机之间的相互访问. 在这篇文章中,我们将会以最简单明了的方式来说明如何配置客户机与 Linux ...
- xUtils中用DbUtils，ViewUtils的用法
一.有关xUtils的简介 xUtils 包含了很多实用的android工具.xUtils 最初源于Afinal框架,进行了大量重构,使得xUtils支持大文件上传,更全面的http请求协议支持(10 ...
- js同域名下不同文件下使用coookie
//写cookies function setCookie(name,value) { var Days = 30; var exp = new Date(); exp.setTime(exp.get ...
- Php开发工具：PhpStorm=webstorm+php+db/SQL
下载地址:https://www.jetbrains.com/zh/phpstorm/specials/phpstorm/phpstorm.html?utm_source=baidu&utm_ ...
- .NET资料之-根据两点经纬度计算直线距离
最近做东西碰到要根据两点经纬度计算之间的直线距离,就网上找了查了下资料.因为这类接触的比较少,就直接找现成的代码了,没怎么研究.代码如下,作为记录. private const double EART ...