js兑现简单的table拖动功能
日期：2014-05-16 浏览次数：20474 次
通过js实现简单的table拖动功能，目前拖动的cell设置为td层，可扩展。
?
附件中table.html是朋友传给我的，原作者不详，在此对他表示感谢，我这里应该叫扩展，标题有点大了，drag table demo.html是我修改之后的一个小例子，传上来主要是供本人学习借鉴。
本想查下jQuery的，好像没有找到单元格可以拖动的，看这个比较简单，就没有仔细研究jQuery的插件了，直接改这个了。
<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>Drag Table Demo</TITLE>
</head>
<body>
<table>
<tr>
<td>
? <table class="lsitTalbe" align="center"? 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 style="cursor:move" title="按住可拖动"><INPUT class=inputStyle id=chkTaskItem_3 type=checkbox value=3 name=chkTaskItem></TD>
??????? <TD style="cursor:move" title="按住可拖动"><INPUT class=inputStyle id=txtTaskName_3 type=txtTaskName? size=10 name=txtTaskName value="test1"></TD>
??????? <TD style="cursor:move" title="按住可拖动">test1</TD>????
??? </tr>
???? <tr class="odd" id="tr_2">?
??????? <TD style="cursor:move" title="按住可拖动">2</TD>
??????? <TD style="cursor:move" title="按住可拖动"><INPUT class=inputStyle id=chkTaskItem4 type=checkbox value=4 name=chkTaskItem></TD>
??????? <TD style="cursor:move" title="按住可拖动"><INPUT class=inputStyle id=txtTaskName_4 type=txtTaskName? size=10 name=txtTaskName value="test2"></TD>
??????? <TD style="cursor:move" title="按住可拖动">test2</TD>??????
??? </tr>
???? <tr class="even" id="tr_3">
??????? <TD style="cursor:move" title="按住可拖动">3</TD>
???????? <TD style="cursor:move" title="按住可拖动"><INPUT class=inputStyle id=chkTaskItem_5 type=checkbox value=5 name=chkTaskItem></TD>
??????? <TD style="cursor:move" title="按住可拖动"><INPUT class=inputStyle id=txtTaskName_5 type=txtTaskName? size=10 name=txtTaskName value="test3"></TD>
??????? <TD style="cursor:move" title="按住可拖动">test3</TD>??
??? </tr>???
? </table>
<td>
</tr>
</table>
</body>
</html>
<script language="javaScript">
????//源对象
??? var srcRowIndex;
?? //目标对象
??? var targetRowIndex;
??? var bDragMode ;
??//Drag对象
??? 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.M
