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;    
}

我有一个奇怪的问题，当我将我的一个可排序项（可拖动？）拖到＆＃34; trashcan＆＃34;时，当设置该表格宽度时，它不会在正确的位置注册。

我拖动的拖动是一个包含3列的表格行;第一列是可拖动的元素。

如果我没有设置垃圾桶的表格宽度（由于之前的规则它会变成页面宽度），我没有问题。但是，在设置宽度的情况下，如果我将拖放放在垃圾箱区域中可拖动td可居住的区域（列方式），则只拖放它;它有效...

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

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

我可能做错了什么？

注意：还有一个侧面问题，＆＃34;垃圾桶＆＃34;也是可以辍学的;超出了这个问题的范围虽然我认为......

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

Answer 1

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

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

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

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

出于某种原因，我无法接受我2天的回答。我不太可能再回到这一点，所以假装这是接受的答案。

调整大小的表

1 个答案: