带有调整大小的表的 jQuery UI 可丢弃奇怪行为

Posted 2023-05-08

【中文标题】带有调整大小的表的 jQuery UI 可丢弃奇怪行为

【英文标题】：jQuery UI droppable odd behavior with resized table

【发布时间】：2016-06-14 02:46:49

【问题描述】：

考虑以下几点：

JS：

$('table.trashCan tbody').droppable(
                            drop: function ( event, ui )                                    
                                ui.draggable.remove();
                            
                        );

html：

<table class="trashCan">
                                    <tbody>
                                        <tr>
                                            <td>

                                            </td>
                                        </tr>
                                    </tbody>
                                </table>

CSS：

table.trashCan 
  width: 64px;


table.trashCan td, table.trashcan td.trashcan:first-child 
    background-color: red;   
    width: 64px;
    height: 64px;
    float: right;
    border: 1px solid;    

我有一个奇怪的问题，当我将一个可排序的（可拖动的？）拖到“垃圾箱”时，设置表格宽度时它没有在正确的位置注册。

我正在拖动的可拖动对象是一个有 3 列的表格行；第一列是可拖动元素。

如果我不设置垃圾桶的表格宽度（由于之前的规则，它变成了页面宽度），我没有问题。但是，如果设置了宽度，则仅当我将可拖动对象放在可拖动的 td 将在垃圾表区域中（按列）存在的区域时才会注册；它有效...

这有点难以解释，请查看this jsfiddle that reproduces the issue。

如果您删除 table.trashCan 规则，它几乎可以正常工作，但我需要调整它的大小以使其看起来不愚蠢。我最终试图获得一些回收站式的功能。

我做错了什么？

注意：还有一个问题是“垃圾桶”也可以丢弃；虽然我认为超出了这个问题的范围......

编辑：为了澄清，请尝试将底部表格中的第一列拖到上面的表格中 - 它不起作用。尝试将其拖动到底部表格上方的区域，与第一列所在的垂直区域相同（基本上是直接向上拖动）并放下 - 它确实有效。

【参考方案1】：

好吧，事实证明，问题是由于我没有正确设置容差：

\$('table.trashCan tbody').droppable(
                            tolerance:  "pointer",
                            drop:       function ( event, ui )                                     
                                ui.draggable.remove();
                            
                        );

将容差选项设置为“指针”给了我想要的行为。我刚刚假设这是默认行为（有点奇怪，它不是 imo）

对于其他有类似问题的人： http://api.jqueryui.com/droppable/#option-tolerance

由于某种原因，我在 2 天内无法接受我的回答。我不太可能再回到这个问题上，所以就假装这是公认的答案。