javascript - jQuery UI 可删除的奇怪行为与调整大小的表

Question

考虑以下因素:

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 放置在垃圾箱区域中可拖动的 td 所在的区域(按列)时，可拖动才会注册；它有效...

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

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

我可能做错了什么？

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

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

Answer 1

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

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

将容差选项设置为“指针”给了我我想要的行为。我刚刚假设这是默认行为(在我看来这有点奇怪)

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

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