how to make dragged element droppable again

how to make dragged element droppable again

I am using Jquery UI and creating drag and drop feature. I have div element which can be dragged and then once it is dragged, user can add images to this dragged div element. This is how my code is setup




$("#dvSource img").draggable({
        //containment: '#gbox',
        cursor: 'move',
        helper: 'clone',
        scroll: false,
        connectToSortable: '#edit, #edit1, #mainContentDiv' ,
        //appendTo: '#edit',
        start: function () {},
        stop: function (event, ui) {}
    }).mousedown(function () {});



$("#edit1").draggable({
        cursor: 'move',
        helper: 'clone',
        scroll: false,
        connectToSortable: '#mainContentDiv',
        //appendTo: '#droppable',
        start: function () {$( this ).addClass( "droppedDiv" );  },
        stop: function (event, ui) {}
    }).mousedown(function () {});



$( "#mainContentDiv").droppable({ 
accept: "#edit1",
      drop: function( event, ui ) {  
ui.draggable.attr("id","draggeddd");
$("#mainContentDiv").append(ui.draggable);
//$( this ).addClass( "ui-state-highlight" );
      }
    });



$( "#draggeddd" ).droppable({
accept: "#dvSource img",
      drop: function( event, ui ) {
 alert("fial drop");
//$(".droppedDiv").append(ui.draggable);
$("#draggeddd").append(ui.draggable);
      }
    });



edit1 is the DIV which is dragged and placed in mainContentDiv. This part is working fine. But when i try to add image place in #dvSource img to this dropped DIV, it is not doing that.

Please help me out how can i acheive this. In short,my question is , after dragging a DIV in dropped area, how can i add more elements to this dragged DIV.