jQuery UI droppable odd behavior with resized table
<p>Consider the following:</p>

<p>JS:</p>

<pre><code>$('table.trashCan tbody').droppable({
                            drop: function ( event, ui )                                    
                                ui.draggable.remove();
                            }
                        });
</code></pre>

<p>HTML:</p>

<pre><code>&lt;table class="trashCan"&gt;
                                    &lt;tbody&gt;
                                        &lt;tr&gt;
                                            &lt;td&gt;

                                            &lt;/td&gt;
                                        &lt;/tr&gt;
                                    &lt;/tbody&gt;
                                &lt;/table&gt;
</code></pre>

<p>CSS:</p>

<pre><code>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;    
}
</code></pre>

<p>I have an odd issue where when I drag one of my sortables (draggable?) to the "trashcan", it does not register at the correct location when that table width is set.</p>

<p>The draggable that I am dragging is a table row with 3 columns; the first column is the draggable element.</p>

<p>If I do not set the table width of the trashcan (it becomes page width due to an earlier rule), I have no problem with it. However, with width set, the draggable only registers if I drop it in an area where the draggable <code>td</code> would live (column wise) in the trash table area; it works...</p>

<p>This is a bit hard to explain, so check out <a href="https://jsfiddle.net/qpv9oy40/" rel="nofollow">this jsfiddle that reproduces the issue</a>.</p>

<p>If you remove the <code>table.trashCan</code> rule, it pretty much works as normal, but I need it resized so that it doesn't look stupid. I am ultimately trying to get some recycle-bin-style functionality. </p>

<p>What could I be doing wrong?</p>

<p><strong>NOTE:</strong> There is also a side issue where the "trashcan" is also droppable; out of scope of this issue though I think...</p>

<p><strong>EDIT:</strong> To clarify, try dragging the first column in the bottom table to the table above--it does not work. Try dragging it to an area just above the bottom table, in the same vertical area as where the first column lives (drag straight up essentially) and drop--it does work. </p>