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 ...
随机推荐
- sed 命令编辑文本
1.sed 概述 sed 是一个非交互式文本编辑器.它能够对文本文件和标准输入进行编辑,标准输入能够是来自键盘输入.文件重定向.字符串.变量.甚至来自于管道文本. 2.sed工作流程简述 sed在处理 ...
- JQuery 之 跳出循环
1.跳出each循环 return false 跳出循环 return true 进入下一个循环 2.跳出for循环 break;直接退出for这个循环.这个循环将不再被执行! continue;直接 ...
- KineticJS教程（11）
KineticJS教程(11) 作者: ysm 11.对象的上下关系 11.1.层的上下关系 Kinetic的层是按照添加到舞台的次序,由下向上排列,上层遮盖下层的图形.每个层各自有一个ZIndex编 ...
- 娓娓道来c指针 (4)解析c的声明语句
(4)解析c的声明语句 在继续探索c指针之前.有必要来解析下c语言中复杂的声明语法. 仅仅须要记住两则:一个原则,一个规则. 原则:先看标示符. 规则:运算符优先级是规则. 举例说明 1.最简单的 i ...
- 2、JSP脚本
JSP脚本 JSP脚本包含了JSP表达式.声明标识和脚本程序.通过这些标识,在JSP页面中可以如同编写Java程序一样来声明变量.定义方法和执行各种表达式的运算 1.在JSP中应用代码片段 语法格式: ...
- jsp基本语法总结
一,用jsp脚本元素调用java代码 1,jsp表达式的应用 jsp表达式将值直接插入到输出中: <%= Java Expression %> 代表一个值 隐式对象,在使用jsp表达式的 ...
- iOS-仿智联字符图片验证码
概述 随机字符组成的图片验证码, 字符位数可改变, 字符可斜可正排列. 详细 代码下载:http://www.demodashi.com/demo/10850.html 项目中有时候会有这种需求: 获 ...
- 用Html写一个简单的登陆界面
<!DOCTYPE html> <html> <title>登陆页面</title> <head> <meta charset=&qu ...
- C3P0连接参数解释
<c3p0-config> <default-config> <!--当连接池中的连接耗尽的时候c3p0一次同时获取的连接数.Default: 3 --> < ...
- 10分钟学会搭建Android开发环境 Eclipse: The import android.support cannot be resolved
10分钟学会搭建Android开发环境_隋雨辰 http://v.youku.com/v_show/id_XNTE2OTI5Njg0.html?from=s1.8-1-1.2 The import a ...