JQuery .get error when drag item inside droppable elment!

Question

my part of code:

function orderFileInfoMWindow(event){

    event.preventDefault();

    //var orderFileInfoMWindowPanel = $('<div class="orderFileInfoMWindowPanel"></div>').appendTo('body');

    var orderFileInfoMWindowPanel = $('<div />',{'id':'orderFileInfoMWindowPanel'}).append($('<div />',{'class':'orderFileInfoMWindowPanelHeader'}))
                                    .append($('<div />',{'class':'orderFileInfoMWindowPanelContainer'}).append($('<ul id="orderFileInfoMWindowPanelUL" />')))
                                    .draggable({handle : ".orderFileInfoMWindowPanelHeader",containment:"document"})
                                    .appendTo('body');

                                    $('#orderFileInfoMWindowPanelUL').sortable({ placeholder: 'ui-state-highlight' , containment: '#orderFileInfoMWindowPanelUL'});//, handle : '.showNoFileDetailHeader'
                                    //$("#ul li").disableSelection();

    //var header = $("<div />", { "class" : "orderFileInfoMWindowPanelHeader"} 
    var droppedElements = [];

    $( "#orderFileInfoMWindowPanelUL" ).droppable({

        accept: '.showNoFileDetail',
        tolerance: 'fit' ,
        drop: function( event, ui ) {

            var elem = $(ui.draggable).attr('id');
            // check "div_info" whether inside the droppable
            if(jQuery.inArray( elem, droppedElements ) === -1){

                $( "#info" ).html($(ui.draggable).attr('id'));//"Dropped!" 
                var $element = $('#'+$(ui.draggable).attr('id'));
                var liElement = $element.wrap('<li id="li_'+$(ui.draggable).attr('id')+'"/>').addClass("showNoFileDetailDroppedIn").removeClass('showNoFileDetail');
                $('#li_'+$(ui.draggable).attr('id')).appendTo($(this));//.find('.orderFileInfoMWindowPanelContainer ul')
                //$element.appendTo($(this).find('.orderFileInfoMWindowPanelContainer li'))
                $element.css({'top':0, 'left':20});

                droppedElements.push(elem);

                //$element.draggable('disable');
                $('.showNoFileDetailDroppedIn').draggable({helper:'original', connectToSortable: "#orderFileInfoMWindowPanelUL"}).css({'position':'relative'}); //,
                console.log('inside panel');
            }

            /*for(i= 0;i<droppedElements.length;i++){

                console.log(droppedElements[i]);
                var $element = $('#'+droppedElements[i]);
                $element.draggable( "destroy" );
                $element.draggable({ handle: ".showNoFileDetailHeader" ,containment: "#orderFileInfoMWindowPanelUL" , distance:5  });//,connectToSortable: "#orderFileInfoMWindowPanelUL"
            }*/

        }
        /*activate: function( event, ui){
            console.log('over inside panel');

            var $element = $('#'+$(ui.draggable).attr('id'));
            $element.draggable({ handle: ".showNoFileDetailHeader" ,containment: "#orderFileInfoMWindowPanel" , distance:5 });
        },*/
        /*deactivate: function( event, ui){
            console.log('over inside panel');

            var $element = $('#'+$(ui.draggable).attr('id'));
            $element.draggable({ handle: ".showNoFileDetailHeader" ,containment: "#orderFileInfoMWindowPanel" , distance:5 });
        }*/
    });

My work flow is : first I have some "div_info" elements which draggable and dynamic created with "create button" , and then I create a "droppable_div" with "droppable and Sortable" enabled , and then I can drag and drop "div_info" inside "droppable_div".And the "div_info" which inside "droppable_div" could move up and down .But I got an error in this code:

 connectToSortable: "#orderFileInfoMWindowPanelUL"

the firebug return this:

a is undefined
a))();else c.error("Invalid JSON: "+a)...f(d)if(i)for(f in a){if(b.apply(a[f], 
jquery.js (row 29 )

this error happen when I drag and drop the "div_info" inside the "droppable_div".

thank you very much!!