方案一
@Component
struct WorkCircleCreatePage {// 存储车控列表的数组@State VehicleDoorArr: IVehicleDoor[] = []// 当前移动的Item索引@State CurrentIndex: number = -1// 拖动时显示的数据@State MoveItem: IVehicleDoor = { title: '', icon: '' }// 拖动时放大倍数@State ScaleXY: ScaleOptions = { x: 1, y: 1 }// 是否超出范围@State isExtendGridArea: boolean = false@State isPress: boolean = false //是否按压aboutToAppear() {this.getData()}getData() {// 列表的数据let list: IVehicleDoor[] = [{ title: 'item1', icon: $r('app.media.portrait_person_default') },{ title: 'item2', icon: $r('app.media.portrait_person_default') },{ title: 'item3', icon: $r('app.media.portrait_person_default') },{ title: 'item4', icon: $r('app.media.portrait_person_default') },{ title: 'item5', icon: $r('app.media.portrait_person_default') },{ title: 'item6', icon: $r('app.media.portrait_person_default') },{ title: 'item7', icon: $r('app.media.portrait_person_default') },]if (this.VehicleDoorArr.length == 0) {list.forEach((item: IVehicleDoor, index: number) => {this.VehicleDoorArr.push(item)})}}// 交换数组位置changeIndex(itemIndex: number, insertIndex: number) {// this.VehicleDoorArr.splice(insertIndex,1,this.VehicleDoorArr(itemIndex,1)[0])const item = this.VehicleDoorArr[itemIndex]this.VehicleDoorArr.splice(itemIndex, 1)this.VehicleDoorArr.splice(insertIndex, 0, item)}//设置拖拽过程中显示的图片。@BuilderpixelMapBuilder() {Column() {Column() {Column() {Image(this.MoveItem.icon).width(24).aspectRatio(1)}.height(56).width(56).borderRadius(56).justifyContent(FlexAlign.Center).backgroundColor(Color.White).draggable(false) //是否支持拖拽Text(this.MoveItem.title).height(17).fontSize('12fp').textAlign(TextAlign.Center).fontFamily('PingFang SC').fontWeight(400).margin({ top: 6 })}.scale(this.ScaleXY)}.width('25%').height(100).justifyContent(FlexAlign.Center)}build() {NavDestination() {Column() {Row() {Text('拖拽实现自定义排序').width('100%').textAlign(TextAlign.Center)}.width('100%').height(100)Row() {Divider().strokeWidth(0.5).width(95)Text('长按可拖动顺序').width(112).height(24).fontSize('16fp').fontWeight(400).textAlign(TextAlign.Center).fontFamily('PingFang SC').margin({ left: 16.5, right: 16.5 })Divider().strokeWidth(0.5).width(95)}.width('100%').margin({ top: 24, bottom: 24 }).justifyContent(FlexAlign.Center).alignItems(VerticalAlign.Center)Grid() {ForEach(this.VehicleDoorArr, (item: IVehicleDoor, index: number) => {GridItem() {VehicleDoorItem({ VehicleDoorItem: item })}.scale(this.CurrentIndex === index ? th