dragging element to sortable element but losing id and bound events on draggable element in the process

dragging element to sortable element but losing id and bound events on draggable element in the process

Hi,

I have a draggable panel and dragging it to sortable component.
Though dragging and dropping process is successful and draggable component sits pretty in sortable component but draggable panel is loosing id and for that matter all the elements inside the panel is loosing events bound to them.

I am not cloning the draggable element rather moving the actual element to sortable list hence there is no problem of having same id in two places.

Could you please advice how to address this problem?
I need id and events tied to all the elements inside panel intact.

Trying to put some code 

<div id="preBuiltReportInfo" class="ui-panel ui-widget ui-widget-content ui-corner-all" data-widget="widget_preBuiltReportInfo" style="position: relative;">

<div id="preBuiltReportInfo_header" class="ui-panel-titlebar ui-widget-header ui-helper-clearfix ui-corner-all"><span class="ui-panel-title">What is a Pre-built Report?</span>

<a id="preBuiltReportInfo_closer" href="javascript:void(0)" class="ui-panel-titlebar-icon ui-corner-all ui-state-default"><span class="ui-icon ui-icon-closethick"></span></a>

</div>
</div>


<div id="sortable">
<div>test<div>
</div>

$("#preBuiltReportInfo").draggable({ 
addClasses: false,
connectToSortable: "#sortable",
scroll: false
});
$("#sortable").sortable({
   update: function() {
   },
   receive: function(event, ui) {
       alert("dropped item ID: " + ui.item.attr('id'));
   }
});


Regards,
Anupam.