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所在的區域（列明）時，可拖動纔會註冊;它的工作原理...

這是有點難以解釋，所以檢查出this jsfiddle that reproduces the issue。

如果您刪除了table.trashCan規則，它幾乎可以正常工作，但我需要調整其大小，以免它看起來很愚蠢。我最終試圖獲得一些回收bin風格的功能。

我會做什麼錯？

注意：也有一個側面的問題，其中「垃圾桶」也是droppable;雖然我認爲這個問題的範圍...

編輯：爲了澄清，嘗試拖動底部表中的第一列到上面的表 - 它不起作用。嘗試將它拖到底部表格正上方的區域，與第一列所在的垂直區域相同（直接向上拖動）並放下 - 它確實起作用。

Answer 1

好了，所以事實證明，這個問題是由於我沒有正確設置公差：

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

設置公差選項爲「指針」給我我想要的行爲。我剛認爲，這是默認行爲（一種奇怪的，這不是IMO）

對於其他人有類似的問題： http://api.jqueryui.com/droppable/#option-tolerance

出於某種原因，我不能接受我的答案爲2天。我不太可能回到這裏，只是假裝這是公認的答案。