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:

score 2 · Accepted Answer · answered Apr 28 '17 at 07:08

2

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
                }
            });
        }
    });
}

answered Apr 28 '17 at 07:08

Naveen Kumar H S

1,304
16
30

yes it firing drop event when you drop to second list but only once. Drop a list item and then try again. I wonder whats in my drop code which is causing event to not be fired again. Unable to find it. – Rahul Bhardwaj Apr 28 '17 at 07:11
It is working fine for the multiple times also. I am able drag and drop more than once. – Naveen Kumar H S Apr 28 '17 at 07:32
You are adding the second **addEventDelegate** to **oDragList**. You should add it on **oDropList**. – Naveen Kumar H S Apr 28 '17 at 07:39
@RahulBhardwaj Is it because of that or is there anything causing this problem. – Naveen Kumar H S Apr 28 '17 at 07:52
Only problem was what you highlight. I added addEventDelegate to oDragList second time as well ( should've added to oDragList. That was wrong. Please write that in you answer. :) – Rahul Bhardwaj Apr 28 '17 at 07:57

addEventDelegate Not fired After Drop in Drag and Drop

1 Answers1