当前页面: 开发资料首页 → Javascript 专题 → JAVASCRIPT+DHTML实现表格拖动
JAVASCRIPT+DHTML实现表格拖动
摘要: JAVASCRIPT+DHTML实现表格拖动
本文系作者原创,如要转贴,请保留以下信息:
http://blog.csdn.net/hunkdong/archive/2005/08/11/451169.aspx
自已做的,本来想在网上找前辈们做的,可是总找不到这种例子,要么找出来的太复杂,
要么就没法用,索性自己写了一个.看看还可以用!贡献出来,估计和我一样的菜鸟用的着!
代码如下:
<table class="MsoTableGrid" style="BORDER-RIGHT: medium none; BORDER-TOP: medium none; BACKGROUND: #e0e0e0; BORDER-LEFT: medium none; BORDER-BOTTOM: medium none; BORDER-COLLAPSE: collapse; mso-border-alt: solid windowtext .5pt; mso-yfti-tbllook: 480; mso-padding-alt: 0cm 5.4pt 0cm 5.4pt; mso-border-insideh: .5pt solid windowtext; mso-border-insidev: .5pt solid windowtext" cellspacing="0" cellpadding="0" border="1"><tr style="mso-yfti-irow: 0; mso-yfti-firstrow: yes; mso-yfti-lastrow: yes"><td style="BORDER-RIGHT: windowtext 1pt solid; PADDING-RIGHT: 5.4pt; BORDER-TOP: windowtext 1pt solid; PADDING-LEFT: 5.4pt; PADDING-BOTTOM: 0cm; BORDER-LEFT: windowtext 1pt solid; WIDTH: 426.1pt; PADDING-TOP: 0cm; BORDER-BOTTOM: windowtext 1pt solid; BACKGROUND-COLOR: transparent; mso-border-alt: solid windowtext .5pt" valign="top" width="568"><head>
<
<
</head>
<body>
JAVASCRIPT+DHTML实现表格拖动 按住 列1 即可拖动
<table class="lsitTalbe" border="1" cellspacing="1" cellpadding="1" onmousedown="mousedown()"
<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>
<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>
</td></tr></table>直接Copy下来就可以用,欢迎大家一起讨论:
↑返回目录
前一篇: ↑→40种网页常用小技巧(javascript)←↓------[不时之需]- -
后一篇: JavaScript escape/unescape编码的Java实现