如何管理多个表单元格Redips中的td数据高度(REDIPS拖放库)
希望你做的很好，我发现了你的拖放库，这是如此惊人和有帮助的，但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 -->回答 1
Stack Overflow用户
发布于 2022-08-05 09: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();
};上面的示例使用另一个lib来合并/拆分TD单元- REDIPS.table。
https://www.redips.net/my/preview/REDIPS_table/
因此，可能有一个选项可以在事件处理程序中创建JS代码，以便在删除大的DIV元素之前自动合并TD单元，然后将其移出以像以前一样拆分.但这将超出REDIPS.drag库的范围，而且可能会变得复杂。
https://stackoverflow.com/questions/73222246
复制相似问题
腾讯云开发者
