addEventDelegate Not fired After Drop in Drag and Drop

Question

I'm trying to implement drag and drop funcitonality between two lists.

I'm able to drag and drop the list item from One list to another. However, after the drop , the second list ( which receives the element) is no more droppable.

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

I also found out, that once the List re-renders itself after receiving the element, it does not call the Delegated Events.

SO basially, how do I add the funcationality back to my draggable list since It does not call 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 Drag:

DOM After Drag:

Answer 1

I think the problem is in your controller. I tried with below code. It is emitting the event when I drop on the second list.

onInit : function() {
    var dragList = this.getView().byId("players");
    dragList.addEventDelegate({
        "onAfterRendering": function(oEvent) {
            $("#" + dragList.getId() + "-listUl li").sortable({
                 revert: true
            });
            $("#" + dragList.getId() + "-listUl li").draggable({
                helper: "clone"
            });
         }
    });

    var dropList = this.getView().byId("playing");
    dropList.addEventDelegate({
        "onAfterRendering": function(oEvent) {
            $("#" + dropList.getId() + "-listUl li").sortable({
                revert: true
            });
            $("#" + dropList.getId()).droppable({
                drop: function(evt, ui) {
                    //You will get your event here. You can do your stuff
                }
            });
        }
    });
}