I need to drop the child element into another child element

I 开发者_开发技巧have to place the child element into another child element. i have used disableSelection(), but child element will not accept the another child element.

$(function() {
    $( "ul.droptrue" ).sortable({
        connectWith: "li"
    });

    $("#sortable, #sortable1").disableSelection();
});

Here jdfiddle link: http://jsfiddle.net/thilakar/QNkEL/7/

Html:

<div id="tree">  
  <ul id="createTree" class="droptrue">
    <li class="listTree ui-state-default" id="sortable">Title1
        <ul class="droptrueInner">
            <li class="innerList ui-state-default">Green</li>
            <li class="innerList ui-state-default">Yellow</li>
            <li class="innerList ui-state-default">Black</li>
            <li class="innerList ui-state-default">White</li>
       </ul>
    </li>
    <li class="listTree1 ui-state-default" id="sortable1">Title2
        <ul class="droptrueInner">
            <li class="innerList ui-state-default">Violet</li>
            <li class="innerList ui-state-default">purple</li>
            <li class="innerList ui-state-default">Pink</li>
            <li class="innerList ui-state-default">Orange</li>
        </ul>
    </li>
  </ul>

Javascript:

$(function() {
        $( "ul.droptrue" ).sortable({
            connectWith: "ul.droptrue"
        });
        $( "ul.droptrueInner" ).sortable({
            connectWith: "ul.droptrueInner"
        });
    });