jQuery的。拖动＆＃39;＆quot;删除两个表之间的行？

时间：2014-07-30 13:42:40

标签： javascript jquery drag-and-drop redips.drag

我有两个表格，我需要实现Drag＆amp; Drop for table rows。

为此，我使用了REDIPs.drag library, like in example15 in demos。

这是我项目的简化镜像代码：

<!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标记内或上方？

1 个答案:

答案 0 :(得分：0)

REDIPS.drag documentation有你问题的答案 阅读它。

已编辑：您真的没有阅读文档。只需将the class = mark放在thead中：

<!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>
相关问题
最新问题