1/** 2 * Copyright (c) 2022 Huawei Device Co., Ltd. 3 * Licensed under the Apache License, Version 2.0 (the "License"); 4 * you may not use this file except in compliance with the License. 5 * You may obtain a copy of the License at 6 * 7 * http://www.apache.org/licenses/LICENSE-2.0 8 * 9 * Unless required by applicable law or agreed to in writing, software 10 * distributed under the License is distributed on an "AS IS" BASIS, 11 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 12 * See the License for the specific language governing permissions and 13 * limitations under the License. 14 */ 15 16@Entry 17@Component 18struct DragExample { 19 @State numbers: string[] = ['one', 'two', 'three', 'four', 'five', 'six'] 20 @State text: string = '' 21 @State bool: boolean = false 22 @State bool1: boolean = false 23 @State appleVisible: Visibility = Visibility.Visible 24 @State orangeVisible: Visibility = Visibility.Visible 25 @State bananaVisible: Visibility = Visibility.Visible 26 @State select: number = 0 27 28 @Builder pixelMapBuilder() { 29 Column() { 30 Text(this.text) 31 .width('50%').height(60).fontSize(16).borderRadius(10) 32 .textAlign(TextAlign.Center).backgroundColor(Color.Yellow) 33 } 34 } 35 36 build() { 37 Column() { 38 Text('There are three Text elements here') 39 .fontSize(12).fontColor(0xCCCCCC).width('90%') 40 .textAlign(TextAlign.Start).margin(5) 41 Flex({ direction: FlexDirection.Row, alignItems: ItemAlign.Center, justifyContent: FlexAlign.SpaceAround }) { 42 Text('apple').width('25%').height(35).fontSize(16) 43 .textAlign(TextAlign.Center).backgroundColor(0xAFEEEE) 44 .visibility(this.appleVisible) 45 .onDragStart(() => { 46 this.bool = true 47 this.text = 'apple' 48 this.appleVisible = Visibility.Hidden 49 return this.pixelMapBuilder 50 }) 51 Text('orange').width('25%').height(35).fontSize(16) 52 .textAlign(TextAlign.Center).backgroundColor(0xAFEEEE) 53 .visibility(this.orangeVisible) 54 .onDragStart(() => { 55 this.bool = true 56 this.text = 'orange' 57 this.orangeVisible = Visibility.Hidden 58 return this.pixelMapBuilder 59 }) 60 Text('banana').width('25%').height(35).fontSize(16) 61 .textAlign(TextAlign.Center).backgroundColor(0xAFEEEE) 62 .visibility(this.bananaVisible) 63 .onDragStart((event: DragEvent, extraParams: string) => { 64 console.log('Text onDragStarts, ' + extraParams) 65 this.bool = true 66 this.text = 'banana' 67 this.bananaVisible = Visibility.Hidden 68 return this.pixelMapBuilder 69 }) 70 }.border({ width: 1 }).width('90%').padding({ top: 10, bottom: 10 }).margin(10) 71 72 Text('This is a List element').fontSize(12) 73 .fontColor(0xCCCCCC).width('90%') 74 .textAlign(TextAlign.Start).margin(15) 75 List({ space: 20, initialIndex: 0 }) { 76 ForEach(this.numbers, (item) => { 77 ListItem() { 78 Text('' + item) 79 .width('100%').height(80).fontSize(16).borderRadius(10) 80 .textAlign(TextAlign.Center).backgroundColor(0xAFEEEE) 81 } 82 .onDragStart((event: DragEvent, extraParams: string) => { 83 console.log('ListItem onDragStarts, ' + extraParams) 84 var jsonString = JSON.parse(extraParams) 85 this.bool1 = true 86 this.text = this.numbers[jsonString.selectedIndex] 87 this.select = jsonString.selectedIndex 88 return this.pixelMapBuilder 89 }) 90 }, item => item) 91 } 92 .editMode(true) 93 .height('50%').width('90%').border({ width: 1 }) 94 .divider({ strokeWidth: 2, color: 0xFFFFFF, startMargin: 20, endMargin: 20 }) 95 .onDragEnter((event: DragEvent, extraParams: string) => { 96 console.log('List onDragEnter, ' + extraParams) 97 }) 98 .onDragMove((event: DragEvent, extraParams: string) => { 99 console.log('List onDragMove, ' + extraParams) 100 }) 101 .onDragLeave((event: DragEvent, extraParams: string) => { 102 console.log('List onDragLeave, ' + extraParams) 103 }) 104 .onDrop((event: DragEvent, extraParams: string) => { 105 var jsonString = JSON.parse(extraParams) 106 if (this.bool) { 107 this.numbers.splice(jsonString.insertIndex, 0, this.text) 108 this.bool = false 109 } else if (this.bool1) { 110 this.numbers.splice(jsonString.selectedIndex, 1) 111 this.numbers.splice(jsonString.insertIndex, 0, this.text) 112 this.bool = false 113 this.bool1 = false 114 } 115 }) 116 }.width('100%').height('100%').padding({ top: 20 }).margin({ top: 20 }) 117 } 118}