-1

我有两张桌子，我需要实现表格行的拖放。

为此，我使用了 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 标签中或上方？

4

1 回答 1

0

REDIPS.drag 文档为您的问题提供了答案。
阅读。

编辑：您真的没有阅读文档。只需将 class=mark 放在前面的所有内容上：

<!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 class="mark">-</TH>
                    <TH class="mark">Column 2</TH>
                    <TH class="mark">Column 3</TH>
                    <TH class="mark">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 class="mark">-</TH>
                    <TH class="mark">Column 2</TH>
                    <TH class="mark">Column 3</TH>
                    <TH class="mark">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>
于 2014-07-30T13:51:42.457 回答