Programatically adding a draggable to a list of sortable

Programatically adding a draggable to a list of sortable

Hi All, 

How to add a draggable to sortable programatically ? 

<script> 
 $(function() {
 $( "#sortable" ).sortable({
 revert: true
 });
 });
 $(document).ready(function() {
 setTimeout(add(), 3000);
 });
 function add(){
 var $obj = $( "<li class='ui-state-default' id='d7' >Item 7</li>" );
 $obj.draggable({
 connectToSortable: "#sortable"
 });
 $obj.appendTo($('#sortable'));
 }
 </script> 
</head> 
<body> 

 <ul id="sortable"> 
 <li class="ui-state-default" id="d1" >Item 1</li> 
 <li class="ui-state-default" id="d2">Item 2</li> 
 <li class="ui-state-default" id="d3">Item 3</li> 
 <li class="ui-state-default" id="d4">Item 4</li> 
 <li class="ui-state-default" id="d5">Item 5</li> 
</ul>  


In the above code i have a list of sortables, i want to add the draggable($obj) to a sortable, even though i add to the sortable in the add method, that gets added but does not play as a draggable, 
Do i need to call any method of sortable after adding the draggable ? 

Changing the function add to the below code works good in chrome, but not in IE8

 function add(){
     $( "<li class='ui-state-default' id='d7' >Item 7</li>" )
         .appendTo($('#sortable')).slideDown()
         .draggable({
             connectToSortable: "#sortable"
         });
 }


Thanks,
Chris