Nested drag and drop using jquery ui

To Drop items into dropped items

<table id='list1' >
</table>

<ul id="list2" >
</ul>

<table id='list3' >
<tr><td>test<ul style="min-height: 100px;border:1px solid red" class="drop-container"></ul></td></tr>
</table>

I have following code

$( "#list3 li" ).draggable({
            connectToSortable: "#list2",
            helper: "clone",
            revert: "invalid"
});
$( "#list1 li" ).draggable({
        connectToSortable: "#list2",
        helper: "clone",
        revert: "invalid",
        greedy: true
});

How can i drop list1 item into list2 of list3's ul?

Fiddle: http://ift.tt/1aCwaur