AddEventDelegate Doesn't start after dragging

I am trying to implement the funcitonality of drag and drop between two lists.

I can drag a list item from one list to another. However, after the drop, the second list (which receives the item) is no longer available.

I checked the DOM and found that the droppable class "ui-droppable" is not listed. This class was added to the list using the jquery droppable plugin extending OnAfterRendering.

I also figured out that after the List re-renders itself after receiving the item, it does not raise delegated events.

SO basically, how do I add the funcationality back to my drag and drop list since it doesn't raise delegated events?

Code:

XML Lists:

     <HBox justifyContent="SpaceBetween">
        <items>
            <List 
                headerText='Players'
                id='players' 
                items='{/players}'>
                <layoutData>
                    <FlexItemData growFactor="1" />
                </layoutData>
                <items>
                    <ObjectListItem
                        title="{name}" >
                        <attributes>
                            <ObjectAttribute
                            title='Role'
                            text="{role}" />
                            <ObjectAttribute
                            title='Rating'
                            text="{rating}" />
                        </attributes>
                    </ObjectListItem>
                </items>
                </List>

                <List 
                headerText='Playing XI'
                id='playing' 
                items='{playing>/playing}'>
                <layoutData>
                    <FlexItemData growFactor="1" />
                </layoutData>
                <items>
                    <StandardListItem
                        title="{playing>name}" />
                </items>
                </List>
        </items>
    </HBox>

      

        
        
        
      

    

Controller:

oDragList.addEventDelegate({
            "onAfterRendering": function(oEvent) {
                $("#" + idDragList + "-listUl li").sortable({
                      revert: true
                });
                $("#" + idDragList + "-listUl li").draggable({
                     helper: "clone"
                });
            }
        });

        oDragList.addEventDelegate({
            "onAfterRendering": function(oEvent) {
                $("#" + oDropListId + "-listUl li").sortable({
                      revert: true
                });

                $("#" + oDropListId).droppable({
                    drop: function(evt, ui) {
//                      debugger;
                        var oControl = ui.draggable.control()[0];
//                      debugger;
                        var oContext = oControl.getBindingContext().getObject();
                        var srcControl = evt.srcControl,
                            oPlayingModel = srcControl.getModel("playing");

                        oPlayingModel.getProperty("/playing").push(oContext);
                        oPlayingModel.refresh();
                    }
                });



            }
        });

      

        
        
        
      

    

Dummy Data:

var data = [
            {
                name:"Sachin Tendulkar",
                role:"Batsman",
                rating:"100"
            },

            {
                name:"Saurav Ganguly",
                role:"Batsman",
                rating:"78"
            }
];

      

        
        
        
      

    

DOM before dragging:

DOM After Drag: