考虑以下因素:
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
规则,它几乎可以正常工作,但我需要调整它的大小,以便它看起来不那么愚蠢。我最终试图获得一些回收站风格的功能。
我可能做错了什么?
注意:还有一个附带问题,即“垃圾桶”也是可丢弃的;虽然我认为超出了这个问题的范围......
编辑:为了澄清这一点,请尝试将底部表格中的第一列拖动到上面的表格中 - 它不起作用。尝试将其拖动到底部表格上方的区域,与第一列所在的垂直区域相同(本质上是垂直向上拖动)并放下 - 它确实有效。
最佳答案
好吧,事实证明,问题是由于我没有正确设置容差造成的:
\$('table.trashCan tbody').droppable({
tolerance: "pointer",
drop: function ( event, ui ) {
ui.draggable.remove();
}
});
将容差选项设置为“指针”给了我我想要的行为。我刚刚假设这是默认行为(在我看来这有点奇怪)
对于其他有类似问题的人: http://api.jqueryui.com/droppable/#option-tolerance
由于某种原因,我有两天无法接受我的答复。我不太可能回到这个问题,所以就假装这是公认的答案。
关于javascript - jQuery UI 可删除的奇怪行为与调整大小的表,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/35727059/