jQuery Sortable Connected Lists - Issue dragging the first time

I have a strage issue with my sortable lists. I have designed a portal framework in ASP.NET and jQuery and I'm using a sortable list to move gadgets from one to another placeholder (list). These two lists are connected together:

$(this.PlaceHolderClass).sortable({
    cursor: 'move',
    connectWith: this.PlaceHolderClass,
    handle: '.ControlToolbar',
    revert: true,
    placeholder: 'SortPlaceHolder',
    dropOnEmpty: true
}).disableSelection();

this.PlaceHolderClass has the value 'ControlPlaceHolder', which are the place holder containers (DIV) that hold my widgets/controls (see HTML bellow).

The problem I have is that when I start dragging an element from list1 to list2, I cannot d开发者_高级运维rop it in list2 the first time. When I release the mouse button, the item dragged is returned in list1. When I start dragging the same item again to list2, then everything works fine. I don't know why this occures and why I'm not able to drag these items at the first time.

The HTML code I use look like this:

<table>
    <tr>
        <td style="width:50%;">
            <div id="ControlPlaceHolder$test" class="ControlPlaceHolder">
                    <div id="container$38$control" class="Control">
                        <div id="control$38$external">
                            My content here...
                        </div>
                    </div>
                </div>
            </div>
        </td>
        <td>
            <div id="ControlPlaceHolder$test2" class="ControlPlaceHolder"></div>
        </td>
    </tr>
</table>

Suggestions are very welcome.

Thanks, Sead

---

If list 2 is empty before you drag into it, you may need to set a min-height of the <ul>.

I had this problem initially and it was because an empty ul had no height at all and therefor couldn't recieve an item.

If this is not the case are there any errors in the console on the first failed drop?