sortable horizontal requires Y change.table.thead.tr webkit bug jqueryui 1.8.12

click and drag the 2 10px to the left, then move mouse up 2px, this causes the placeholder to move where it needs to. That last action should not be required. Going the opposite direction appears to require moving the mouse 2px down!

HTML

<link href="http://code.jquery.com/ui/jquery-ui-git.css" rel="stylesheet" />
<script src="http://code.jquery.com/jquery-git.js"></script>
<script src="http://code.jquery.com/ui/jquery-ui-git.js"></script>

<p><a href="http://bugs.jqueryui.com/ticket/4765">jQuery UI #4765</a>: Placeholder does not appear when sorting table rows.  In the example below note that you see the placeholder when sorting the list but not the rows.</p>

<table>
    <tbody>
        <tr>
            <td>A</td>
            <td>B</td>
        </tr>
        <tr>
            <td>C</td>
            <td>D</td>
        </tr>
    </tbody>
</table>

<ul>
    <li>1</li>
    <li>2</li>
</ul>

CSS

th, td {
    border: 1px solid black;
}

body { padding: 20px; }
p { margin: 20px 0; line-height: 1.4; }
ul { margin-top: 30px; }

JavaScript

$( "tbody" ).sortable({
    placeholder: {
        element: function() {
            return $( "<tr><td colspan=99>&nbsp;</td></tr>" )[0];
        },
        update: function() {}
    }
});