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 ...
随机推荐
- vb.net Bitmap Drawing
Public Class Form1 Dim BMP As New Drawing.Bitmap(640, 480) Dim GFX As Graphics = Graphics.FromImage( ...
- hdu 4494 Teamwork （可行流的最小流）
去年通话邀请赛的B题,当时居然过的那么少...明明是一道非常裸的可行流最小流麽..仅仅要对每种人分别求一下可行最小流加起来就能够了.建图是对每一个点拆点,容量上下届都设为v[i],然后每一个点间能连边 ...
- <a>标签实现锚点跳跃，<a>标签实现href不跳跃另外加事件（ref传参）
1.锚点跳跃 HTML: <div class="page_title" id="maodian"> <h1>客房节日价格管理</ ...
- lamp 一键安装
下载安装(ssh登录服务器,执行如下操作即可,需要用到root用户权限来安装) 源码编译安装 wget http://dl.wdlinux.cn:5180/lanmp_laster.tar.gz ta ...
- Android Context原理与使用的总结
一.Context继承体系 与 Context是怎样创建的 1. Context继承体系 仅仅用记住一句:Activity . Service 与Application 都是继承自ContextWra ...
- REST测试工具之curl(URL多参数)
在微服务理念满天飞的今天,面对REST接口的机会越来越多. 除了打开浏览器的方法,我们还有一个很方便的方法测试REST接口,尤其是接口返回JSON数据格式时. 这就是curl. 一.安装篇 给一个可以 ...
- NPN/PNP和N沟道/P沟道负载的接法
N沟道mos管和p沟道mos管负载的接法不一样,随意接的话导致VGS不满足条件:如下图N沟道接法,下拉电阻R2必须接,否则电路状态不稳定. 三极管原理类似如下图(满足三极管导通条件) NPN型三极管: ...
- spring中ApplicationContext
1 spring 容器应用上下文:ApplicationContext 主要的实现类是 ClassPathXmlApplicationContext 和 FileSystemXmlApplicatio ...
- CentOS 5.5 下修改Apache默认端口80
打开 /etc/httpd/conf/httpd.conf 文件 修改两个地方 #Listen 12.34.56.78:80 Listen 80 #把80改为你设置的端口,我设置端 ...
- Android7.0 MessageQueue
Android中的消息处理机制大量依赖于Handler.每一个Handler都有相应的Looper,用于不断地从相应的MessageQueue中取出消息处理. 一直以来,觉得MessageQueue应 ...