我有两张桌子，我需要实现表格行的拖放。
为此，我使用了 REDIPs.drag 库，就像 demos 中的 example15 一样。
这是我项目中的简化镜像代码：
<!DOCTYPE html">
<html>
<head>
<script type="text/javascript" src="redips-drag-min.js"></script>
<script type="text/javascript" src="code.jquery.com/jquery-1.11.1.min.js"></script>
<style>
</style>
<script type="text/javascript">
var redipsInit = function () {
var rd = REDIPS.drag;
rd.init();
rd.hover.colorTd = '#FFCFAE';
rd.hover.colorTr = '#9BB3DA';
rd.hover.borderTd = '0px solid #32568E';
rd.hover.borderTr = '0px solid #32568E';
rd.rowDropMode = 'after';
rd.dropMode = 'single';
rd.event.rowMoved = function () {
rd.rowOpacity(rd.obj, 85);
rd.rowOpacity(rd.objOld, 20, 'White');
};
rd.event.rowDropped = function(targetRow, sourceTable, sourceRowIndex) {
rd.deleteObject(rd.objOld);
};
rd.event.rowDroppedSource = function () {
rd.deleteObject(rd.obj);
rd.rowOpacity(rd.objOld, 100);
};
};
function fx() {
redipsInit();
};
</script>
</head>
<body onload="fx()">
<div id="drag">
<p>
<b>First table:</b>
</p>
<TABLE ID="TABLE1" BORDER="1" CELLSPACING="0" CELLPADDING="2" style="margin-top:15px; width:30%">
<col style="text-align:center; width:50px; border: 0px" />
<col style="width:20%; text-align:center;" />
<col width="60%" />
<col width="15%" />
<THEAD>
<TH>-</TH>
<TH>Column 2</TH>
<TH>Column 3</TH>
<TH>Column 4</TH>
</THEAD>
<TBODY>
<TR style="height:45px;">
<TD class="rowhandler">
<div class="drag row">
<img src="" style="border: none;" />
</div>
</TD>
<TD>
1
</TD>
<TD>
One
</TD>
<TD>
00.00.0000
</TD>
</TR>
</TBODY>
</TABLE>
<br />
<p>
<b>Second table:</b>
</p>
<TABLE ID="TABLE2" BORDER="1" CELLSPACING="0" CELLPADDING="2" style="margin-top:15px; width:30%">
<col style="text-align:center; width:50px; border: 0px" />
<col style="width:20%; text-align:center;" />
<col width="60%" />
<col width="15%" />
<THEAD>
<TH>-</TH>
<TH>Column 2</TH>
<TH>Column 3</TH>
<TH>Column 4</TH>
</THEAD>
<TBODY>
<TR style="height:45px;">
<TD class="rowhandler">
<div class="drag row">
<img src="" style="border: none;" />
</div>
</TD>
<TD>
2
</TD>
<TD>
Two
</TD>
<TD>
11.11.1111
</TD>
</TR>
</TBODY>
</TABLE>
</div>
</body>
</html>
只需下载redips-drag-min.js并将其与 sample.html 放在同一文件夹中。
注意：使用行的第一列中不存在的图像图标拖动行。
如何阻止将行拖放到 THEAD 标签中或上方？