问如何管理多个表单元格Redips中的td数据高度(REDIPS拖放库)
EN

Stack Overflow用户

提问于 2022-08-03 05:04:40

回答 1查看 39关注 0票数 0

希望你做的很好，我发现了你的拖放库，这是如此惊人和有帮助的，但O被困在小问题上，你能帮帮我吗？

以下是问题所在：

当表数据中有较大的项时，它在表格中垂直获取空间，像图像一样，有40 it的高度，然后垂直占据两个表格单元格。

>>图像有70 it的高度，然后垂直占据三个表格单元。

我希望你能理解，这是我当前代码的链接：https://jsfiddle.net/vijaysolankiii/tyrm6uv1/12/

提前谢谢

<div id="main-container">           
    <div id="redips-drag">  
        <!-- left container -->
        <div id="left">
            <table id="table1">
                <colgroup>
                    <col width="100"/>
                </colgroup>
                <tbody>
                    <!-- clone 2 elements + last element -->
                    <tr>
                        <td class="dark"><div id="e" class="redips-drag redips-clone orange">Drag  1</div></td>
                        <td class="dark"><div id="f" class="redips-drag redips-clone green">Drag  2</div></td>
                        <td class="dark"><div id="e" class="redips-drag redips-clone red">Drag 3</div></td>
                        <td class="redips-trash">Delete</td>
                  </tr>
                </tbody>
            </table>
        </div><!-- left container -->
        
        <!-- right container -->
        <div id="right">
            <table id="table2">
                <colgroup>
                    <col width="100"/>
                    <col width="100"/>
                    <col width="100"/>
                    <col width="100"/>
                </colgroup>
                <tbody>
                    <tr>
                        <td class="redips-mark"></td>
                        <td class="redips-mark"></td>
                        <td class="redips-mark"></td>
                        <td class="upper-right redips-mark"></td>
                    </tr>
                    <tr>
                        <td class="redips-mark"></td>
                        <td class="redips-mark"></td>
                        <td class="redips-mark"></td>
                        <th class="redips-mark"></th>
                    </tr>
                    <tr>
                        <td class="redips-mark"></td>
                        <td class="redips-mark"></td>
                        <td class="redips-mark"></td>
                        <th class="redips-mark"></th>
                    </tr>
                    <tr>
                        <td class="last"></td>
                        <th class="last"></th>
                        <th class="last"></th>
                        <th class="last"></th>
                    </tr>
                    <tr>
                        <td class="lower-left last"></td>
                        <th class="last"></th>
                        <th class="last"></th>
                        <th class="last"></th>
                    </tr>
                </tbody>
            </table>
        </div><!-- right container -->
    </div><!-- drag container -->
</div><!-- main container -->

javascript

html

jquery

css

redips.drag

回答 1

Stack Overflow用户

发布于 2022-08-05 01:23:00

我是REDIPS.drag的作者，我会尽力回答你的问题。整个库建立在HTML表格栅格之上作为一个基础。因此，单个DIV元素不可能同时占用少量TD。但是，有一种方法可以首先合并TD单元(生成或动态生成HTML表时)，然后可以将DIV元素拖放到这个更大的TD中。

无论如何，在下面的jsFiddle示例中，您可以手动标记彼此相邻的两个TD单元格，然后单击顶部的"Merge“按钮。这将动态合并TD单元。现在，您将能够将DIV元素拖放到这个合并的单元格中。下面是jsFiddle准备的示例和合并TD单元的代码片段。

https://jsfiddle.net/dbunic/cexn1wvn/94/

// method merges table cells
redips.merge = function () {
    // first merge cells horizontally and leave cells marked
    REDIPS.table.merge('h', false);
    // and then merge cells vertically and clear cells
    REDIPS.table.merge('v');
    // table should be initialized after merging
    REDIPS.drag.initTables();
};