jquery-ui-draggable - addEventDelegate 在拖放后未触发

Question

我正在尝试在两个列表之间实现拖放功能。

我可以将列表项从一个列表拖放到另一个列表。但是，在 drop 之后，第二个列表(接收元素)不再是可删除的。

我检查了 DOM，发现列表没有可放置类“ui-droppable”。此类通过扩展 OnAfterRendering 使用 jquery 插件 droppable 添加到列表中。

我还发现，一旦列表在接收到元素后重新呈现自身，它就不会调用委托(delegate)事件。

基本上，我该如何将功能添加回我的可拖动列表，因为它不调用委托(delegate)事件？

代码:

XML 列表:

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



            }
        });

虚拟数据:

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

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

拖动前的 DOM:

拖动后的 DOM:

Answer 1

我认为问题出在您的 Controller 上。我尝试使用以下代码。当我放在第二个列表中时，它会发出事件。

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