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 ...
随机推荐
- Python 访问dict
访问dict 1:可以if判断元素是否存在 2:dict.get('key')我们已经能创建一个dict,用于表示名字和成绩的对应关系:d = { 'Adam': 95, 'Lisa': 85, 'B ...
- 【Linux】cd命令
用途 cd命令的主要作用是变换目录 全称 cd的全称是Change Directory 案例 以下是一些基础的cd命令操作(酒红色字体为命令 ,蓝色字体为解释字体) [root@bigdata ~ ...
- 揭秘ThreadLocal（转）
转载自:掘金大闲人柴毛毛博客. ThreadLocal是开发中最常用的技术之一,也是面试重要的考点.本文将由浅入深,介绍ThreadLocal的使用方式.实现原理.内存泄漏问题以及使用场景. Thre ...
- linux内核——PAE（物理地址扩展）
引入PAE机制后,分页模式是怎样的呢? 首先,要搞明白几件事,2.6.11以上版本的linux内核中,存在4中页表(页全局目录,页上级目录,页中级目录,页表),这些页表结构是已经存在于硬盘中的,当进程 ...
- asp.net MVC 视图文件(cshtml/vbhtml)变更编译过程示范
更改cshtml文件的时候 并不会触发程序重新启动,而是进入了编译状态 csc.exe进程启动. 非阻塞的方式进行等待,延时等待. 示范程序:http://pan.baidu.com/s/1skDY ...
- ubuntu 命令行下查看网页 w3m
w3m localhost/index.php
- github get 请求指定页面的代码
https://raw.githubusercontent.com/dragon8github/wx-h5/master/push.sh
- django Proxy models ---- 代理模式
一个proxy models 不会在数据库中创建新的表.而是与它的基类共用同一个表 1.model 的定义: from django.db import models # Create your mo ...
- ecshop报错”Deprecated: Assigning the return value of…”解决办法
ECSHOP生成站点地图提示”Deprecated: Assigning the return value of new by reference is deprecated in…”. 我的问题在批 ...
- Spring Cloud(一)：概述以及核心成员介绍
什么是Spring Cloud? Spring Cloud是一个基于Spring Boot实现的云应用开发工具,它为基于JVM的云应用开发中的配置管理.服务发现.断路器.智能路由.微代理.控制总线.全 ...