Question

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

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

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

我还发现，一旦List在接收到元素后重新呈现它，它就不会调用Delegated Events。

所以基本上，如何将功能性添加回我的可拖动列表，因为它不会调用委托事件？

代码：

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>

控制器：

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

我认为问题出在您的控制器中。我试过下面的代码。当我放入第二个列表时，它正在发出事件。

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

addEventDelegate在拖放中删除后未触发

1 个答案: