diff --git a/zh-cn/application-dev/reference/arkui-ts/figures/border_spring.gif b/zh-cn/application-dev/reference/arkui-ts/figures/border_spring.gif new file mode 100644 index 0000000000000000000000000000000000000000..91ac864a628eeee65b3415cc5910081e8db10a38 Binary files /dev/null and b/zh-cn/application-dev/reference/arkui-ts/figures/border_spring.gif differ diff --git a/zh-cn/application-dev/reference/arkui-ts/figures/drag_between_grid.gif b/zh-cn/application-dev/reference/arkui-ts/figures/drag_between_grid.gif new file mode 100644 index 0000000000000000000000000000000000000000..b96c769c2d50d6123a8e75da9e38b3c21a6f8f73 Binary files /dev/null and b/zh-cn/application-dev/reference/arkui-ts/figures/drag_between_grid.gif differ diff --git a/zh-cn/application-dev/reference/arkui-ts/figures/drag_in_grid.gif b/zh-cn/application-dev/reference/arkui-ts/figures/drag_in_grid.gif new file mode 100644 index 0000000000000000000000000000000000000000..57d13aa8ac2929afcf05e9639c8035b88839a553 Binary files /dev/null and b/zh-cn/application-dev/reference/arkui-ts/figures/drag_in_grid.gif differ diff --git a/zh-cn/application-dev/reference/arkui-ts/figures/drag_in_out_grid.gif b/zh-cn/application-dev/reference/arkui-ts/figures/drag_in_out_grid.gif new file mode 100644 index 0000000000000000000000000000000000000000..1f1b1cc5d085d7b04e30634ee18795c07e5ae4d8 Binary files /dev/null and b/zh-cn/application-dev/reference/arkui-ts/figures/drag_in_out_grid.gif differ diff --git a/zh-cn/application-dev/reference/arkui-ts/figures/grid-17.gif b/zh-cn/application-dev/reference/arkui-ts/figures/grid-17.gif new file mode 100644 index 0000000000000000000000000000000000000000..9ead4d671531532629b2fbf2f411ce4008dde3ba Binary files /dev/null and b/zh-cn/application-dev/reference/arkui-ts/figures/grid-17.gif differ diff --git a/zh-cn/application-dev/reference/arkui-ts/figures/grid_edit_drag.gif b/zh-cn/application-dev/reference/arkui-ts/figures/grid_edit_drag.gif new file mode 100644 index 0000000000000000000000000000000000000000..c76390cf988e6e7bbd154c1b2f116d3f2654d791 Binary files /dev/null and b/zh-cn/application-dev/reference/arkui-ts/figures/grid_edit_drag.gif differ diff --git a/zh-cn/application-dev/reference/arkui-ts/ts-container-grid.md b/zh-cn/application-dev/reference/arkui-ts/ts-container-grid.md index 35d9a4fb0082b17e6ea924bace9353641db02297..ad0aa0dbe767f7175e5b37da0ad3ba3b200a914e 100644 --- a/zh-cn/application-dev/reference/arkui-ts/ts-container-grid.md +++ b/zh-cn/application-dev/reference/arkui-ts/ts-container-grid.md @@ -1,149 +1,438 @@ -# Grid - ->![](../../public_sys-resources/icon-note.gif) **说明：** ->该组件从API Version 7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。 - -网格容器，二维布局，将容器划分成"行"和"列"，产生单元格，然后指定"项目所在"的单元格，可以任意组合不同的网格，做出各种各样的布局。 - -## 权限列表 - -无 - -## 子组件 - -包含[GridItem](ts-container-griditem.md)子组件。 - -## 接口说明 - -Grid\(\) - -## 属性 - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

名称

-

参数类型

-

默认值

-

描述

-

columnsTemplate

-

string

-

'1fr'

-

用于设置当前网格布局列的数量，不设置时默认1列 示例, '1fr 1fr 2fr' 分三列，将父组件允许的宽分为4等份，第一列占1份，第二列占一份，第三列占2份。

-

rowsTemplate

-

string

-

'1fr'

-

用于设置当前网格布局行的数量，不设置时默认1行 示例, '1fr 1fr 2fr'分三行，将父组件允许的高分为4等份，第一行占1份，第二行占一份，第三行占2份。

-

columnsGap

-

Length

-

0

-

用于设置列与列的间距。

-

rowsGap

-

Length

-

0

-

用于设置行与行的间距。

-
- -## 事件 - - - - - - - - - -

名称

-

功能描述

-

onScrollIndex(first: number) => void

-

当前列表显示的起始位置item发生变化时触发。

-
- -## 示例 - -``` -@Entry -@Component -struct GridExample { - @State Number: String[] = ['0', '1', '2', '3', '4'] - - build() { - Column({ space: 5 }) { - Grid() { - ForEach(this.Number, (day: string) => { - ForEach(this.Number, (day: string) => { - GridItem() { - Text(day) - .fontSize(16) - .backgroundColor(0xF9CF93) - .width('100%') - .height('100%') - .textAlign(TextAlign.Center) - } - }, day => day) - }, day => day) - } - .columnsTemplate('1fr 1fr 1fr 1fr 1fr') - .rowsTemplate('1fr 1fr 1fr 1fr 1fr') - .columnsGap(10) - .rowsGap(10) - .width('90%') - .backgroundColor(0xFAEEE0) - .height(300) - - Text('scroll').fontColor(0xCCCCCC).fontSize(9).width('90%') - Grid() { - ForEach(this.Number, (day: string) => { - ForEach(this.Number, (day: string) => { - GridItem() { - Text(day) - .fontSize(16) - .backgroundColor(0xF9CF93) - .width('100%') - .height(80) - .textAlign(TextAlign.Center) - } - }, day => day) - }, day => day) - } - .columnsTemplate('1fr 1fr 1fr 1fr 1fr') - .columnsGap(10) - .rowsGap(10) - .onScrollIndex((first: number) => { - console.info(first.toString()) - }) - .width('90%') - .backgroundColor(0xFAEEE0) - .height(300) - }.width('100%').margin({ top: 5 }) - } -} -``` - -![](figures/grid-3.gif) - +# Grid + +网格容器，二维布局，将容器划分成"行"和"列"，产生单元格，然后指定"项目所在"的单元格，可以任意组合不同的网格，做出各种各样的布局。 + +## 权限类别 + +无 + +## 子组件 + +包含[GridItem](ts-container-griditem.md)子组件。 + +## 接口 + +Grid\(\) + +## 属性 + +不支持*`backgroundColor`*以外的通用属性设置。 + +| 名称 | 参数类型 | 默认值 | 描述 | +| ------------------------------------------------------- | --------------- | -------------------- | ------------------------------------------------------------ | +| columnsTemplate | string | '1fr' | 用于设置当前网格布局列的数量，不设置时默认1列 示例, '1fr 1fr 2fr' 分三列，将父组件允许的宽分为4等份，第一列占1份，第二列占一份，第三列占2份。 | +| rowsTemplate | string | '1fr' | 用于设置当前网格布局行的数量，不设置时默认1行 示例, '1fr 1fr 2fr'分三行，将父组件允许的高分为4等份，第一行占1份，第二行占一份，第三行占2份。 | +| columnsGap | Length | 0 | 用于设置列与列的间距。 | +| rowsGap | Length | 0 | 用于设置行与行的间距。 | +| editMode8+ | boolean | false | 进入编辑模式，支持Gird组件内部拖拽。 | +| layoutDirection8+ | LayoutDirection | LayoutDirection::Row | LayoutDirection::Row：Grid水平方向布局
LayoutDirection::Column：Grid垂直方向布局
LayoutDirection::RowReverse：Grid水平方向布局
LayoutDirection::ColumnReverse：Grid水平方向布局 | +| maxCount8+ | number | 1 | 当Grid为垂直方向布局，表示可显示的最大行数；当Grid为水平方向布局，表示可显示的最大列数。 | +| minCount8+ | number | 1 | 当Grid为垂直方向布局，表示可显示的最小行数；当Grid为水平方向布局，表示可显示的最小列数。 | +| cellLength8+ | number | 0 | 当Grid为垂直方向布局，表示每行的固定高度；当Grid为水平方向布局，表示每列的固定宽度。 | +| supportAnimation8+ | boolean | true | Grid是否支持引力动画：true表示支持引力动画，false不支持引力动画。 | + +## 事件 + +| 名称 | 功能描述 | +| ------------------------------------------------------------ | ------------------------------------------------------------ | +| onScrollIndex(first: number) => void | 当前列表显示的起始位置item发生变化时触发。 | +| onItemDragStart8+(event: ItemDragInfo, itemIndex: number) => ((() => any) \| void) | 绑定后，第一次拖拽item时，触发回调。（当监听了onDrop事件时，此事件才有效）
itemindex: 当前被拖拽的item原本的索引。 | +| onItemDragEnter8+(event: ItemDragInfo) => void | 绑定后，拖拽进入组件范围内时，触发回调。（当监听了onDrop事件时，此事件才有效） | +| onItemDragMove8+(event: ItemDragInfo, itemIndex: number, insertIndex: number) => void | 绑定后，拖拽在可放置组件范围内移动时，触发回调。（当监听了onDrop事件时，此事件才有效）
insertIndex: 当前拖入宫格进行插入后item的索引。
itemindex: 当前被拖拽的item原本的索引。 | +| onItemDragLeave8+(event: ItemDragInfo, itemIndex: number) => void | 绑定后，拖拽离开组件范围内时，触发回调。（当监听了onDrop事件时，此事件才有效）
itemindex: 当前被拖拽的item原本的索引。 | +| onItemDrop8+(event: ItemDragInfo, itemIndex: number, insertIndex: number, isSuccess: boolean) => void | 绑定此事件的组件可作为拖拽释放目标，当在本组件范围内停止拖拽行为时，触发此回调。
insertIndex: 当前拖入宫格进行插入后item的索引。
itemindex: 当前被拖拽的item原本的索引。
isSuccess: drop时插入是否成功。
(场景1:isSuccess = true, itemindex > 0, insertIndex > 0。调整内部item位置;
场景2:isSuccess = true, itemindex = -1, insertIndex > 0。插入新的item;
场景3:isSuccess = true, itemindex > 0, insertIndex = -1。删除内部item;
场景4:isSuccess = false。事件不做任何处理) | + +## 示例 + +```typescript +@Entry +@Component +struct GridExample { + @State Number: String[] = ['0', '1', '2', '3', '4'] + + build() { + Column({ space: 5 }) { + Grid() { + ForEach(this.Number, (day: string) => { + ForEach(this.Number, (day: string) => { + GridItem() { + Text(day) + .fontSize(16) + .backgroundColor(0xF9CF93) + .width('100%') + .height('100%') + .textAlign(TextAlign.Center) + } + }, day => day) + }, day => day) + } + .columnsTemplate('1fr 1fr 1fr 1fr 1fr') + .rowsTemplate('1fr 1fr 1fr 1fr 1fr') + .columnsGap(10) + .rowsGap(10) + .width('90%') + .backgroundColor(0xFAEEE0) + .height(300) + + Text('scroll').fontColor(0xCCCCCC).fontSize(9).width('90%') + Grid() { + ForEach(this.Number, (day: string) => { + ForEach(this.Number, (day: string) => { + GridItem() { + Text(day) + .fontSize(16) + .backgroundColor(0xF9CF93) + .width('100%') + .height(80) + .textAlign(TextAlign.Center) + } + }, day => day) + }, day => day) + } + .columnsTemplate('1fr 1fr 1fr 1fr 1fr') + .columnsGap(10) + .rowsGap(10) + .onScrollIndex((first: number) => { + console.info(first.toString()) + }) + .width('90%') + .backgroundColor(0xFAEEE0) + .height(300) + }.width('100%').margin({ top: 5 }) + } +} +``` + +![](figures\grid-17.gif) + +```javascript +@Entry +@Component +struct Hello { + @State Number2: String[] = ['a', 'b', 'c'] + @State Number1: String[] = ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11'] + private NumberTmp: String[] = [] + private DragNumberCash: String[] = [] + private DragItemIndex : number + @State ConflictTest : string = 'ConflictTest' + @Builder SquareText() { + Flex({ justifyContent: FlexAlign.Center, direction: FlexDirection.Column, alignItems: ItemAlign.Center }){ + Text("label1") + .fontSize(20) + .backgroundColor(Color.Yellow) + }.width(100) + .height(100) + } + @Builder SquareText2() { + Flex({ justifyContent: FlexAlign.Center, direction: FlexDirection.Column, alignItems: ItemAlign.Center }){ + Text("label2") + .fontSize(20) + .backgroundColor(Color.Yellow) + }.width(100) + .height(100) + } + build() { + Column({ space: 10 }) { + Button() {} + Grid() { + ForEach(this.Number2, (day: string) => { + GridItem() { + Text(day) + .fontSize(30) + .backgroundColor(0xF9CF93) + .width('100%') + .height('100%') + .textAlign(TextAlign.Center) + } + }, day => day) + } + .rowsTemplate('1fr 1fr 1fr') + .columnsGap(10) + .rowsGap(10) + .minCount(1) + .maxCount(3) + .cellLength(100) + .backgroundColor(0xFAEEE0) + .height(240) + .editMode(true) + .onItemDragEnter((event)=>{ + console.log(">>>>>>>> RenderGridLayout grid 2: onGridDragEnter called: x:"+event.x + " y:"+event.y); + }) + + .onItemDragMove((event, itemIndex, insertIndex)=>{ + console.log(">>>>>>>> RenderGridLayout grid 2: onGridDragMove called: itemIndex=" + itemIndex + + ",insertIndex=" + insertIndex + " x:"+event.x + " y:"+event.y); + }) + + .onItemDragLeave((event, itemIndex)=>{ + console.log(">>>>>>>> RenderGridLayout grid 2: onGridDragLeave called: itemIndex=" + itemIndex + " x:"+event.x + " y:"+event.y); + }) + + .onItemDragStart((event, itemIndex)=>{ + console.log(">>>>>>>> RenderGridLayout grid 2: onGridDragStart called: itemIndex=" + itemIndex + " x:"+event.x + " y:"+event.y); + this.DragNumberCash = this.Number2; + this.DragItemIndex = itemIndex; + console.log(">>>>>>>> RenderGridLayout grid 2: onGridDragStart called: DragNumberCash=" + this.DragNumberCash + " DragNumber: " + this.DragNumberCash[itemIndex]); + return this.SquareText2; + }) + + .onItemDrop((event, itemIndex, insertIndex, isSuccess)=>{ + console.log(">>>>>>>> RenderGridLayout grid 2: onGridDrop called: itemIndex=" + itemIndex + + ",insertIndex=" + insertIndex + ", isSuccess=" + isSuccess + " x:"+event.x + " y:"+event.y); + console.log(">>>>>>>> RenderGridLayout grid 2: onGridDrop old array:" + this.Number2); + if (isSuccess) { + if (itemIndex >= 0 && insertIndex >= 0 ){ //调整内部item位置 + console.log(">>>>>>>> RenderGridLayout grid 2: onGridDrop move"); + this.NumberTmp = this.Number2; + console.log(">>>>>>>> RenderGridLayout grid 2: onGridDrop DragNumber=" + this.DragNumberCash[itemIndex]); + if (itemIndex > insertIndex) { + this.NumberTmp.splice(insertIndex,0,this.DragNumberCash[itemIndex]); + console.log(">>>>>>>> RenderGridLayout grid 2: onGridDrop after1 insert array:" + this.Number2); + this.NumberTmp.splice(itemIndex + 1,1); + } else { + this.NumberTmp.splice(insertIndex + 1,0,this.DragNumberCash[itemIndex]); + console.log(">>>>>>>> RenderGridLayout grid 2: onGridDrop after2 insert array:" + this.Number2); + this.NumberTmp.splice(itemIndex,1); + } + this.Number2 = this.NumberTmp; + } else if (itemIndex == -1 && insertIndex >= 0) { //插入新的item + console.log(">>>>>>>> RenderGridLayout grid 2: onGridDrop insert"); + this.Number2.splice(insertIndex,0,this.DragNumberCash[this.DragItemIndex]); + } else if (itemIndex >= 0 && insertIndex == -1) { //删除内部item + console.log(">>>>>>>> RenderGridLayout grid 2: onGridDrop delete"); + this.Number2.splice(itemIndex,1); + } + } + console.log(">>>>>>>> RenderGridLayout grid 2: onGridDrop new array:" + this.Number2); + }) + + + Grid() { + ForEach(this.Number1, (day: string) => { + GridItem() { + Text(day) + .fontSize(30) + .backgroundColor(0xF9CF93) + .width('100%') + .height('100%') + .textAlign(TextAlign.Center) + } + }, day => day) + } + .columnsTemplate('1fr 1fr 1fr 1fr') + .rowsTemplate('1fr 1fr 1fr') + .columnsGap(10) + .rowsGap(10) + .width('90%') + .backgroundColor(0xFAEEE0) + .height(260) + .editMode(true) + .layoutDirection(LayoutDirection.Column) + .onItemDragEnter((event)=>{ + console.log(">>>>>>>> RenderGridLayout grid 1: onGridDragEnter called:" + " x:"+event.x + " y:"+event.y); + }) + + .onItemDragMove((event, itemIndex, insertIndex)=>{ + console.log(">>>>>>>> RenderGridLayout grid 1: onGridDragMove called: itemIndex=" + itemIndex + + ",insertIndex=" + insertIndex + " x:"+event.x + " y:"+event.y); + }) + + .onItemDragLeave((event, itemIndex)=>{ + console.log(">>>>>>>> RenderGridLayout grid 1: onGridDragLeave called: itemIndex=" + itemIndex + " x:"+event.x + " y:"+event.y); + }) + + .onItemDragStart((event, itemIndex)=>{ + console.log(">>>>>>>> RenderGridLayout grid 1: onGridDragStart called: itemIndex=" + itemIndex + " x:"+event.x + " y:"+event.y); + this.DragNumberCash = this.Number1; + this.DragItemIndex = itemIndex; + console.log(">>>>>>>> RenderGridLayout grid 1: onGridDragStart called: DragNumberCash=" + this.DragNumberCash + " DragNumber: " + this.DragNumberCash[itemIndex]); + return this.SquareText; + }) + + .onItemDrop((event, itemIndex, insertIndex, isSuccess)=>{ + console.log(">>>>>>>> RenderGridLayout grid 1: onGridDrop called: itemIndex=" + itemIndex + + ",insertIndex=" + insertIndex + ", isSuccess=" + isSuccess + " x:"+event.x + " y:"+event.y); + console.log(">>>>>>>> RenderGridLayout grid 1: onGridDrop old array:" + this.Number1); + if (isSuccess) { + if (itemIndex >= 0 && insertIndex >= 0 ){ //调整内部item位置 + console.log(">>>>>>>> RenderGridLayout grid 1: onGridDrop move"); + this.NumberTmp = this.Number1; + console.log(">>>>>>>> RenderGridLayout grid 1: onGridDrop DragNumber=" + this.DragNumberCash[itemIndex]); + if (itemIndex > insertIndex) { + this.NumberTmp.splice(insertIndex,0,this.DragNumberCash[itemIndex]); + console.log(">>>>>>>> RenderGridLayout grid 1: onGridDrop after1 insert array:" + this.Number1); + this.NumberTmp.splice(itemIndex + 1,1); + } else { + this.NumberTmp.splice(insertIndex + 1,0,this.DragNumberCash[itemIndex]); + console.log(">>>>>>>> RenderGridLayout grid 1: onGridDrop after2 insert array:" + this.Number1); + this.NumberTmp.splice(itemIndex,1); + } + this.Number1 = this.NumberTmp; + } else if (itemIndex == -1 && insertIndex >= 0) { //插入新的item + console.log(">>>>>>>> RenderGridLayout grid 1: onGridDrop insert"); + this.Number1.splice(insertIndex,0,this.DragNumberCash[this.DragItemIndex]); + } else if (itemIndex >= 0 && insertIndex == -1) { //删除内部item + console.log(">>>>>>>> RenderGridLayout grid 1: onGridDrop delete"); + this.Number1.splice(itemIndex,1); + } + } + console.log(">>>>>>>> RenderGridLayout grid 1: onGridDrop new array:" + this.Number1); + }) + + }.width('100%').margin({ top: 0 }) + } +} + +``` + +![](figures\grid_edit_drag.gif) + +![](figures\border_spring.gif) + +```javascript +@Entry +@Component +struct Hello { + @Builder NumberBuilder() { + Flex({ direction: FlexDirection.Column, justifyContent: FlexAlign.Center, alignItems: ItemAlign.Center}){ + Text('drag1').fontSize(20) + }.width(80).height(80).backgroundColor(Color.Red) + } + + @Builder LetterBuilder() { + Flex({ direction: FlexDirection.Column, justifyContent: FlexAlign.Center, alignItems: ItemAlign.Center}){ + Text('drag2').fontSize(20) + }.width(80).height(80).backgroundColor(Color.Blue) + } + + @State Number1: String[] = ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9'] + @State Number2: String[] = ['一', '二', '三'] + private NumberTmp: String[] = ['0', '0', '0', '0', '0', '0', '0', '0', '0', '0'] + private DragNumberCash: String[] = ['0', '0', '0', '0', '0', '0', '0', '0', '0', '0'] + private DragItemIndex : number + build() { + Column({ space: 100 }) { + Button() { + } + Grid() { + ForEach(this.Number1, (day: string) => { + GridItem() { + Text(day) + .fontSize(30) + .backgroundColor(0xF9CF93) + .width('100%') + .height('100%') + .textAlign(TextAlign.Center) + } + }, day => day) + } + .columnsTemplate('1fr 1fr 1fr 1fr') + .rowsTemplate('1fr 1fr 1fr 1fr') + .columnsGap(10) + .rowsGap(10) + .width('90%') + .backgroundColor(0xFAEEE0) + .height(260) + .editMode(true) + .supportAnimation(true) + .onItemDragEnter((event)=>{ + }) + + .onItemDragMove((event, itemIndex, insertIndex)=>{ + }) + + .onItemDragLeave((event, itemIndex)=>{ + }) + + .onItemDragStart((event, itemIndex)=>{ + this.DragNumberCash = this.Number1; + this.DragItemIndex = itemIndex; + return this.NumberBuilder; + }) + + .onItemDrop((event, itemIndex, insertIndex, isSuccess)=>{ + if (isSuccess) { + if (itemIndex >= 0 && insertIndex >= 0 ){ + this.NumberTmp = this.Number1; + if (itemIndex > insertIndex) { + this.NumberTmp.splice(insertIndex,0,this.DragNumberCash[itemIndex]); + this.NumberTmp.splice(itemIndex + 1,1); + } else { + this.NumberTmp.splice(insertIndex + 1,0,this.DragNumberCash[itemIndex]); + this.NumberTmp.splice(itemIndex,1); + } + this.Number1 = this.NumberTmp; + } else if (itemIndex == -1 && insertIndex >= 0) { + this.Number1.splice(insertIndex,0,this.DragNumberCash[this.DragItemIndex]); + } else if (itemIndex >= 0 && insertIndex == -1) { + this.Number1.splice(itemIndex,1); + } + } + }) + + Grid() { + ForEach(this.Number2, (day: string) => { + GridItem() { + Text(day) + .fontSize(30) + .backgroundColor(0xF9CF93) + .width('100%') + .height('100%') + .textAlign(TextAlign.Center) + } + }, day => day) + } + .columnsTemplate('1fr 1fr 1fr') + .rowsTemplate('1fr 1fr') + .columnsGap(60) + .rowsGap(60) + .width('90%') + .backgroundColor(0xFAEEE0) + .height(260) + .editMode(true) + .onItemDragEnter((event)=>{ + }) + + .onItemDragMove((event, itemIndex, insertIndex)=>{ + }) + + .onItemDragLeave((event, itemIndex)=>{ + }) + + .onItemDragStart((event, itemIndex)=>{ + this.DragNumberCash = this.Number2; + this.DragItemIndex = itemIndex; + return this.LetterBuilder; + }) + + .onItemDrop((event, itemIndex, insertIndex, isSuccess)=>{ + console.log(">>>>>>>> RenderGridLayout grid 2: onGridDrop old array:" + this.Number2); + if (isSuccess) { + if (itemIndex >= 0 && insertIndex >= 0 ){ + this.NumberTmp = this.Number2; + if (itemIndex > insertIndex) { + this.NumberTmp.splice(insertIndex,0,this.DragNumberCash[itemIndex]); + this.NumberTmp.splice(itemIndex + 1,1); + } else { + this.NumberTmp.splice(insertIndex + 1,0,this.DragNumberCash[itemIndex]); + this.NumberTmp.splice(itemIndex,1); + } + this.Number2 = this.NumberTmp; + } else if (itemIndex == -1 && insertIndex >= 0) { + this.Number2.splice(insertIndex,0,this.DragNumberCash[this.DragItemIndex]); + } else if (itemIndex >= 0 && insertIndex == -1) { + this.Number2.splice(itemIndex,1); + } + } + }) + + }.width('100%').margin({ top: 0 }) + } +} +``` + +![](figures\drag_in_grid.gif) + +![](figures\drag_in_out_grid.gif) + +![](figures\drag_between_grid.gif) \ No newline at end of file