频道订阅拖拽

 import { TopNavDTO } from 'wdBean';
 
-
 const INDEX_SETTING_TITLE: string = '首页设置'
 const INDEX_SETTING_SUBTITLE: string = '将指定频道设置为首页'
 const MY_CHANNEL: string = '我的频道'
@@ -19,7 +18,9 @@ struct ChannelDialog {
   @Link localChannelList: TopNavDTO[]
   @Link indexSettingArray: string[]
   controller?: CustomDialogController
-  confirm: (index: number) => void = () => {}
+  confirm: (index: number) => void = () => {
+  }
+  changeChannelIndex : (index1:number, index2:number) => void = ()=>{}
   myChannelItemEditHandle = (index: number): void => {
     let item = this.myChannelList.splice(index, 1)[0]
     if (item.moreChannel === '1') {
@@ -30,6 +31,34 @@ struct ChannelDialog {
     }
   }
 
+  @Builder
+  pixelMapBuilder(item: TopNavDTO, index: number) { //拖拽过程样式
+    Row() {
+      Row() {
+        Text(item.name)
+          .fontSize(14)
+          .fontColor(this.currentTopNavSelectedIndex === index ? '#ED2800' : (item.homeChannel === '1' || item.movePermitted === 0 ? '#999999' : '#222222'))
+
+        if (this.isEditIng && item.myChannel !== '1') {
+          Image($r('app.media.icon_audio_close'))
+            .width(12)
+            .margin({ left: 1 })
+        }
+      }
+      .width('100%')
+      .height('100%')
+      .justifyContent(FlexAlign.Center)
+      .backgroundColor(item.homeChannel === '1' || item.movePermitted === 0 ? '#F5F5F5' : '#ffffff')
+    }
+    .width('23%')
+    .height(40)
+    .border({
+      width: item.homeChannel === '1' ? 0 : 1,
+      color: '#EDEDED',
+      radius: 3
+    })
+  }
+
   build() {
     Column() {
 
@@ -157,8 +186,25 @@ struct ChannelDialog {
           }
           .width('100%')
           .margin({ bottom: 24 })
+          .columnsTemplate('1fr 1fr 1fr 1fr')
           .columnsGap(8)
           .rowsGap(8)
+          .height(Math.ceil(this.myChannelList.length / 4 ) * 48)
+          .editMode(this.isEditIng)
+          .supportAnimation(true) //设置Grid是否开启拖拽补位动画
+          .onItemDragStart((event: ItemDragInfo, itemIndex: number) => {
+            if(this.myChannelList[itemIndex].headlinesOn===1 || this.myChannelList[itemIndex].movePermitted===0){
+              return
+            }else{
+              return this.pixelMapBuilder(this.myChannelList[itemIndex], itemIndex) //设置拖拽过程中显示的元素。
+            }
+          })
+          .onItemDrop((event: ItemDragInfo, itemIndex: number, insertIndex: number, isSuccess: boolean) => { //绑定此事件的组件可作为拖拽释放目标，当在本组件范围内停止拖拽行为时，触发回调。
+            if (!isSuccess || insertIndex >= this.myChannelList.length || this.myChannelList[insertIndex].headlinesOn===1 || this.myChannelList[insertIndex].movePermitted===0) {
+              return
+            }
+            this.changeChannelIndex(itemIndex,insertIndex)
+          })
         }
 
         //更多频道列表
@@ -259,19 +305,18 @@ struct ChannelDialog {
 // @Entry
 @Component
 struct ChannelSubscriptionLayout {
-  changeTab: (index: number) => void = ()=>{}
+  changeTab: (index: number) => void = () => {
+  }
   @State indexSettingArray: string [] = ['推荐', '热点']
   //当前选中的频道
   @Link currentTopNavSelectedIndex: number;
   @Link myChannelList: TopNavDTO []
   @Link moreChannelList: TopNavDTO []
   @Link localChannelList: TopNavDTO []
-
-  onAccept = (index: number)=> {
+  onAccept = (index: number) => {
     console.log(`onAccept${index}`)
     this.changeTab(index)
   }
-
   // @State currentTopNavSelectedIndex: number = 0
   // @State topNavList: TopNavDTO [] = [
   //   {
@@ -1785,12 +1830,23 @@ struct ChannelSubscriptionLayout {
       myChannelList: $myChannelList,
       moreChannelList: $moreChannelList,
       localChannelList: $localChannelList,
-      confirm: this.onAccept
+      confirm: this.onAccept,
+      changeChannelIndex: this.changeChannelIndex
     }),
     alignment: DialogAlignment.TopEnd,
     customStyle: true,
   })
 
+  changeChannelIndex(index1:number, index2:number) { //交换数组中的位置
+    const temp = this.myChannelList[index1];
+    if (index1 > index2) {
+      this.myChannelList.splice(index2, 0, temp);
+      this.myChannelList.splice(index1 + 1, 1);
+    } else {
+      this.myChannelList.splice(index2 + 1, 0, temp);
+      this.myChannelList.splice(index1, 1);
+    }
+  }
   // topNavListHandle() {
   //   let defaultMyChannelList: TopNavDTO[] = []
   //   let handledTopNavList = [...this.topNavList]