SAP UI5拖放标记器功能(自定义)

1. Sap-ui5拖放功能

在这篇文章中，我们将学习如何实现SAP-UI5控件的拖放。

我的要求是拖放令牌的Tokenizer从一个容器到另一个容器(这里我已经使用了一个VBox作为我的容器)

为了实现这一点，我们需要将Tokenizer控件扩展为可拖放控件

场景:

我们将有4组带有令牌的数据容器。这里我们需要将令牌从一个集合拖放到另一个集合

现在我将从集合A中选择一个令牌，然后我将它放在集合D中，现在它是空的。

单击并从集合a中拖动令牌

放到集合D中

你可以看到，现在它被放到了集合D中

编码:

这里我们正在拖动令牌，并在VBox的。我们需要添加“拖动信息”功能到Tokenizer。默认是禁用的。我们应该通过扩展Tokenizer控件来启用它，如下所示

//扩展标记器的代码

sap.ui.define(["sap/m/Tokenizer"]， function (Tokenizer) {"use strict";返回Tokenizer.extend(“com.test.Tokenizer.util。DragTokenizer"，{元数据:{聚合:{令牌:{类型:'sap.ui.core。Control'，多重:true, dnd:{可拖拽:true，可拖拽:true，布局:"水平"}}，头:{类型:"sap.ui.core。控件"，多个:false, dnd: true}}}，渲染器:{}});})；

现在我们想要拖动“令牌”，所以我们需要在“拖动信息”中为我们构建的自定义令牌器指定我们要拖动的聚合。保持Source聚合为“令牌”，因为我们想要拖动令牌

// Xml的代码

现在我们需要指定放置令牌的位置，因此我们需要向VBox提供“放置信息”，如下所示

//删除信息的代码//

controllerName = " com.test.Tokenizer.controller < mvc:视图。View1 sap.ui.core“xmlns: dnd =”。dnd sap.ui.core“xmlns: mvc =”。xmlns:DT="com.test.Tokenizer. mvc" displayBlock="true"。util " xmlns = " sap。>< Shell id=" Shell ">< App id=" App ">< pages> < content>        < dnd:DropInfo Drop ="onTokenDrop"/>                                      <令牌类="selectedTokenText" key="{fracMappingData>WellName}" tooltip="{fracMappingData>WellName}" text="{fracMappingData>WellName}"/>         

现在可以拖放令牌了。在每拖放，我们需要删除一个项目从上一集，我们应该把它添加到新集。此功能将在删除令牌时完成

在放置令牌时，我们需要调用一个事件来执行必要的操作。对于我们有“drop”事件，我们将使用它如下所示

//功能代码//

onTokenDrop:函数(oEvent){var DragBindingContext=oEvent. getparameters ().draggedControl.getBindingContext("fracMappingData").sPath.split("/");var DragBindingBucket = DragBindingContext [1];var Dragpath = DragBindingContext [2];var = this.getView拖().getModel(“fracMappingData”). getproperty(“/”+ DragBindingBucket);var DropBindingContext = oEvent.getParameters () .droppedControl.mAggregations.items [0] .mBindingInfos.tokens.path.split(“/”);var DropBindingBucket = DropBindingContext [1];var = this.getView下降().getModel(“fracMappingData”). getproperty(“/”+ DropBindingBucket);dropped.push(拖[Dragpath]);this.getView () .getModel (fracMappingData) .setProperty(“/”+ DropBindingBucket,下降);dragged.splice (Dragpath, 1); this.getView().getModel("fracMappingData").setProperty("/"+DragBindingBucket,dragged); }

结论:

在本教程中，我打算介绍如何轻松地将任何控件设置为可拖放控件。SAP默认提供了这个属性和事件，我们只需要扩展并启用它，其余的就会就绪。