sap.ui.define([
"sap/m/Tokenizer"
], function (Tokenizer) {
"use strict";
return Tokenizer.extend("com.test.Tokenizer.util.DragTokenizer", {
metadata: {
aggregations : {
tokens : { type: 'sap.ui.core.Control', multiple : true, dnd : {draggable: true, droppable: true, layout: "Horizontal" } },
header : {type : "sap.ui.core.Control", multiple : false, dnd : true }
}
},
renderer: {}
});
});
<DT:DragTokenizer class="SelectedFracMapToken" tokens="{fracMappingData>/FracThreeTokens}" width="100%">
<DT:dragDropConfig>
<dnd:DragInfo sourceAggregation="tokens"/>
</DT:dragDropConfig> <Token class="selectedTokenText" key="{fracMappingData>WellName}" tooltip="{fracMappingData>WellName}" text="{fracMappingData>WellName}"/>
</DT:DragTokenizer>
<mvc:View controllerName="com.test.Tokenizer.controller.View1" xmlns:dnd="sap.ui.core.dnd" xmlns:mvc="sap.ui.core.mvc" displayBlock="true"
xmlns:DT="com.test.Tokenizer.util" xmlns="sap.m">
<Shell id="shell">
<App id="app">
<pages>
<Page id="page" title="Drag And Drop Functionality">
<content>
<HBox class="hboxHeader">
<Label text="Set A" width="12rem"></Label>
<Label text="Set B" width="12rem"></Label>
<Label text="Set C" width="12rem"></Label>
<Label text="Set D" width="12rem"></Label>
</HBox>
<HBox>
<VBox width="12rem">
<dragDropConfig>
<dnd:DropInfo drop="onTokenDrop"/>
</dragDropConfig>
<DT:DragTokenizer class="SelectedFracMapToken" tokens="{fracMappingData>/FracOneTokens}" width="100%">
<DT:dragDropConfig>
<dnd:DragInfo sourceAggregation="tokens"/>
</DT:dragDropConfig>
<Token class="selectedTokenText" key="{fracMappingData>WellName}" tooltip="{fracMappingData>WellName}" text="{fracMappingData>WellName}"></Token>
</DT:DragTokenizer>
</VBox>
<VBox width="12rem">
<dragDropConfig>
<dnd:DropInfo drop="onTokenDrop"/>
</dragDropConfig>
<DT:DragTokenizer class="SelectedFracMapToken" tokens="{fracMappingData>/FracTwoTokens}" width="100%">
<DT:dragDropConfig>
<dnd:DragInfo sourceAggregation="tokens"/>
</DT:dragDropConfig>
<Token class="selectedTokenText" key="{fracMappingData>WellName}" tooltip="{fracMappingData>WellName}" text="{fracMappingData>WellName}"/>
</DT:DragTokenizer>
</VBox>
<VBox width="12rem">
<dragDropConfig>
<dnd:DropInfo drop="onTokenDrop"/>
</dragDropConfig>
<DT:DragTokenizer class="SelectedFracMapToken" tokens="{fracMappingData>/FracThreeTokens}" width="100%">
<DT:dragDropConfig>
<dnd:DragInfo sourceAggregation="tokens"/>
</DT:dragDropConfig>
<Token class="selectedTokenText" key="{fracMappingData>WellName}" tooltip="{fracMappingData>WellName}" text="{fracMappingData>WellName}"/>
</DT:DragTokenizer>
</VBox>
<VBox width="12rem">
<dragDropConfig>
<dnd:DropInfo drop="onTokenDrop"/>
</dragDropConfig>
<DT:DragTokenizer class="SelectedFracMapToken" tokens="{fracMappingData>/FracFourTokens}" width="100%">
<DT:dragDropConfig>
<dnd:DragInfo sourceAggregation="tokens"/>
</DT:dragDropConfig>
<Token class="selectedTokenText" key="{fracMappingData>WellName}" tooltip="{fracMappingData>WellName}" text="{fracMappingData>WellName}"/>
</DT:DragTokenizer>
</VBox>
</HBox>
</content>
</Page>
</pages>
</App>
</Shell>
</mvc:View>
onTokenDrop:function(oEvent){
var DragBindingContext=oEvent.getParameters().draggedControl.getBindingContext("fracMappingData").sPath.split("/");
var DragBindingBucket=DragBindingContext[1];
var Dragpath=DragBindingContext[2];
var dragged=this.getView().getModel("fracMappingData").getProperty("/"+DragBindingBucket);
var DropBindingContext=oEvent.getParameters().droppedControl.mAggregations.items[0].mBindingInfos.tokens.path.split("/");
var DropBindingBucket=DropBindingContext[1];
var dropped=this.getView().getModel("fracMappingData").getProperty("/"+DropBindingBucket);
dropped.push(dragged[Dragpath]);
this.getView().getModel("fracMappingData").setProperty("/"+DropBindingBucket,dropped);
dragged.splice(Dragpath,1);
this.getView().getModel("fracMappingData").setProperty("/"+DragBindingBucket,dragged);
}
You must be a registered user to add a comment. If you've already registered, sign in. Otherwise, register and sign in.
User | Count |
---|---|
10 | |
9 | |
5 | |
4 | |
4 | |
3 | |
3 | |
3 | |
3 | |
3 |