HarmonyOS 从一个grid或者list组件拖拽item到另一个grid或者list组件,onItemDrop中的item交换要怎么实现
目前拖拽后是这个样子,拖拽的item在另一个组件中不显示内容了,怎么实现让其在另一个组件中也显示正确的内容。
页面代码如下:
@Entry
@Component
struct GridExample {
@State numbers: String[] = []
@State numbers1:String[]=[]
scroller: Scroller = new Scroller()
@State text: string = 'drag'
@Builder pixelMapBuilder() { //拖拽过程样式
Column() {
Text(this.text)
.fontSize(16)
.backgroundColor(0xF9CF93)
.width(80)
.height(80)
.textAlign(TextAlign.Center)
}
}
aboutToAppear() {
for (let i = 1;i <= 15; i++) {
this.numbers.push(i + '')
this.numbers1.push(i + '')
}
}
changeIndex(index1: number, index2: number) { //交换数组位置
let temp: String ;
temp = this.numbers[index1];
this.numbers[index1] = this.numbers[index2];
this.numbers[index2] = temp;
}
build() {
Column({ space: 5 }) {
Grid(this.scroller) {
ForEach(this.numbers, (day: string) => {
GridItem() {
Text(day)
.fontSize(16)
.backgroundColor(0xF9CF93)
.width(80)
.height(80)
.textAlign(TextAlign.Center)
}
})
}
.columnsTemplate('1fr 1fr 1fr')
.columnsGap(10)
.rowsGap(10)
.onScrollIndex((first: number) => {
console.info(first.toString())
})
// .supportAnimation(true)
.width('80%')
.backgroundColor(0xFAEEE0)
.height(300)
.editMode(true) //设置Grid是否进入编辑模式,进入编辑模式可以拖拽Grid组件内部GridItem
.draggable(true)
.onItemDragStart((event: ItemDragInfo, itemIndex: number) => { //第一次拖拽此事件绑定的组件时,触发回调。
return this.pixelMapBuilder() //设置拖拽过程中显示的图片。
})
.onItemDrop((event: ItemDragInfo, itemIndex: number, insertIndex: number, isSuccess: boolean) => { //绑定此事件的组件可作为拖拽释放目标,当在本组件范围内停止拖拽行为时,触发回调。
console.info('beixiang' + itemIndex + '', insertIndex + '') //itemIndex拖拽起始位置,insertIndex拖拽插入位置
if (!isSuccess || insertIndex >= this.numbers.length){
return
}
this.changeIndex(itemIndex, insertIndex)
})
Grid(this.scroller) {
ForEach(this.numbers1, (day: string) => {
GridItem() {
Text(day)
.fontSize(16)
.backgroundColor(0xF9CF93)
.width(80)
.height(80)
.textAlign(TextAlign.Center)
}
})
}
.columnsTemplate('1fr 1fr 1fr')
.columnsGap(10)
.rowsGap(10)
.supportAnimation(true)
.onScrollIndex((first: number) => {
console.info(first.toString())
})
// .supportAnimation(true)
.width('80%')
.backgroundColor(0xFAEEE0)
.height(300)
.editMode(true) //设置Grid是否进入编辑模式,进入编辑模式可以拖拽Grid组件内部GridItem
.draggable(true)
.onItemDragStart((event: ItemDragInfo, itemIndex: number) => { //第一次拖拽此事件绑定的组件时,触发回调。
console.log("onItemDragStart:" + itemIndex)
return this.pixelMapBuilder() //设置拖拽过程中显示的图片。
})
.onItemDrop((event: ItemDragInfo, itemIndex: number, insertIndex: number, isSuccess: boolean) => { //绑定此事件的组件可作为拖拽释放目标,当在本组件范围内停止拖拽行为时,触发回调。
console.info('onItemDrop' + itemIndex + '', insertIndex + '') //itemIndex拖拽起始位置,insertIndex拖拽插入位置
if (!isSuccess || insertIndex >= this.numbers.length){
return
}
let temp: String ;
temp = this.numbers1[itemIndex];
this.numbers1[itemIndex] = this.numbers1[insertIndex];
this.numbers1[insertIndex] = temp;
})
//拖拽进入网格元素范围内时触发
.onItemDragEnter((event: ItemDragInfo) => {
console.info("onItemDragEnter")
return this.pixelMapBuilder
})
//拖拽在网格元素范围内移动时触发
.onItemDragMove((event: ItemDragInfo, itemIndex: number, insertIndex: number) => {
console.info("onItemDragMove" + '\r' + "itemIndex:" + itemIndex + "insertIndex:" + insertIndex)
return this.pixelMapBuilder
})
// 拖拽离开网格元素时触发
.onItemDragLeave((event: ItemDragInfo, itemIndex: number) => {
console.info("onItemDragLeave" + '\r' + "itemIndex:" + itemIndex)
console.log("onItemDragStart:" + itemIndex)
return this.pixelMapBuilder
})
//绑定该事件的网格元素可作为拖拽释放目标,当在网格元素内停止拖拽时触发。
}.width('100%').margin({ top: 5 })
}
}
HarmonyOS
赞
收藏 0
回答 1
待解决
相关问题
HarmonyOS 同一个父组件中的其中一个grid拖拽其中item 怎么避免影响其他的grid?
314浏览 • 1回复 待解决
可否提供一个grid/list之类列表组件中item拖动排序的示例工程
342浏览 • 1回复 待解决
点击一个list的item,怎么给这个item添加class
5992浏览 • 1回复 待解决
JavaUI 中List组件怎么实现右键点击Item项关联弹出一个菜单?
3445浏览 • 1回复 待解决
是否支持一个Compent从一个父容器组件中移除然后加载到另一个父容器组件?
310浏览 • 1回复 待解决
HarmonyOS 一个组件怎么监听另一个组件属性改变
473浏览 • 1回复 待解决
HarmonyOS List组件滑动到某一个Item的顶部
43浏览 • 1回复 待解决
如何读取一个文件的内容到另一个文件中
470浏览 • 1回复 待解决
HarmonyOS sqlite从一个数据库复制表到另一个数据库,如何实现
424浏览 • 1回复 待解决
点击一个组件,让另一个组件立刻销毁再重建
350浏览 • 0回复 待解决
是否可以将组件作为一个参数传给另一个组件?
2043浏览 • 1回复 待解决
HarmonyOS grid 触发拖拽的中途, 怎么才可以做到禁止修改第1个和最后一个item的位置?
158浏览 • 1回复 待解决
如何把一个@Component struct定义的组件,通过参数传递到另一个组件中去?
393浏览 • 1回复 待解决
HarmonyOS List设置数据后,如何获取可视范围内第一个item和最后一个item的位置
37浏览 • 1回复 待解决
List设置了lanes(2)怎么让最后一个item能占据整个List宽度
1960浏览 • 1回复 待解决
HarmonyOS ArkTS有把一个组件移动到另一个窗口上的方法吗?
62浏览 • 1回复 待解决
HarmonyOS Grid拖拽,让部分item不响应拖拽
76浏览 • 1回复 待解决
HarmonyOS 如何将一个 Builder 作为参数传个另一个 Builder?
164浏览 • 1回复 待解决
entry中如何拉起另一个Module中的Ability
4230浏览 • 1回复 待解决
HarmonyOS 数组拼接问题 在一个数组中前置拼接另一个数组
71浏览 • 1回复 待解决
用ETs读取Json文件,并写入到另一个Json文件中
4053浏览 • 0回复 待解决
HarmonyOS 如何让一个module调用另一个module内的单例
28浏览 • 1回复 待解决
如何在一个模块中使用另一个模块中编译出来的so
920浏览 • 1回复 待解决
Scroll里面套一个grid,如何禁用grid的滑动事件
2658浏览 • 1回复 待解决
scroll中嵌套一个或多个grid,如何实现嵌套滚动?
2263浏览 • 1回复 待解决
当从一个组件拖动到另一个组件的时候,正在拖动的组件中触发的onItemDrop事件的itemIndex表示具体的拖动起始位置,但是insertIndex插入位置的值会为-1,另一个组件相反,请根据该特性进行实现。