-2

所以，我的桌子有问题。它有 3 个 tds 是行的单元格，其中 3 个是来自 jquery 的 droppables，我的问题是每次我在它们上放置一个可拖动的单元格时，单元格的高度都会发生变化，它会改变表格的整体高度。我尝试使用 css 属性 table-layout:fixed 但它无法正常工作，如果你能帮助它会很棒......我目前正在使用 jquery，javascript，css，html 和 bootstrap，在此先感谢

桌子

<div class="row">
                    <div class="col-12 tabla">
                        <table class="table table-bordered">
                              <thead>
                                <tr>
                                  <th scope="col">Deportivas</th>
                                  <th scope="col">Culturales</th>
                                  <th scope="col">Otras</th>
                                </tr>
                              </thead>
                              <tbody>
                                <tr>

                                  <td>Ir a atletismo</td>
                                  <td class="td1"></td>
                                  <td>Ir al cumpleaños</td>
                                </tr>
                                <tr>

                                  <td class="td2"></td>
                                  <td>Ir al museo</td>
                                  <td class="td3"></td>
                                </tr>
                                <tr>

                                  <td class="raya"><span class="raya-tb">&#8212;</span></td>
                                  <td class="raya"><span class="raya-tb">&#8212;</span></td>
                                  <td class="libro">Leer un libro</td>
                                </tr>
                              </tbody>
                            </table>
                    </div>
                </div>
            </div>

表格的css

.tabla{
  margin-top: 15%;
}

table
{
  width: 100%;
  height: 100%;
  table-layout: fixed !important;
}

td
{
  padding: 0;
}

和 javascript + jquery 脚本

$("#draggable, #draggable2, #draggable3").draggable(
            {
                cursor: "move",
                helper: 'clone',
                revert: "invalid"

            }
        );

        $(".td3").droppable(
            {
                tolerance: "intersect",
                accept: "#draggable",
                drop: function(event, ui) {
                    $(".td3").append($(ui.draggable));
            }
        });
4

2 回答 2

0

尝试将这些样式添加到 css

td.ui-droppable {
   position: relative;
}
td.ui-droppable .ui-draggable {
   position: absolute;
   left: 0;
   top: 0;
}
于 2018-06-20T20:32:41.470 回答
0

所以我终于放弃了，尝试做同样的过程，将可拖动的 p 放入表格的 td （单元格）中，并用不透明度为 0 的一些文本包裹一个 div，然后当 p 被拖入滴管时，可拖动到 div，因为 div 上已经有文本，所以它不会改变 td 的大小。好吧，我从中学到了两件事，带有可拖动的表格会做意想不到的事情，其次总是将您的项目包装在一个 div 上。谢谢

于 2018-06-25T21:48:45.537 回答