From ca2790be24113dbce50d5dd75e70780ebd23a8d8 Mon Sep 17 00:00:00 2001
From: CodingGorit <5571237+CodingGorit@user.noreply.gitee.com>
Date: Tue, 6 Aug 2024 03:13:44 +0000
Subject: [PATCH] feat: drag remove data

Signed-off-by: CodingGorit <5571237+CodingGorit@user.noreply.gitee.com>
---
 DragDelete.ets | 87 ++++++++++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 87 insertions(+)
 create mode 100644 DragDelete.ets

diff --git a/DragDelete.ets b/DragDelete.ets
new file mode 100644
index 0000000..5e068d1
--- /dev/null
+++ b/DragDelete.ets
@@ -0,0 +1,87 @@
+/**
+ * @Project: MyDemo
+ * @Name: FileDelete
+ * @Create: 2024/08/05 20:02
+ * @Author: Gorit
+ * @IDLE: DevEco Studio
+ * @Description:
+ **/
+
+import UDC from '@ohos.data.unifiedDataChannel';
+import UTD from '@ohos.data.uniformTypeDescriptor';
+
+// 实现拖出当前容器，删除元素
+
+@Component
+export default struct FileDeleteComp {
+
+  @State data: number[] = [1,2,3,4,5];
+  @State currentItem: number = 0;
+  @State historyTotal: number = this.data.length + 1;
+  @State listContainerRange: boolean = false;
+
+  @Builder
+  listBuilder(item: number) {
+    Text(item.toString()).fontSize(18).width("100%").textAlign(TextAlign.Center).border({ width: 1.5})
+  }
+
+  build() {
+    Column({ space: 10 }) {
+      Text("文件删除拖转案例").fontSize(20).margin({ top: 10, bottom: 10})
+      List() {
+        ForEach(this.data,(item: number, index: number) => {
+          ListItem() {
+            Text(item.toString()).fontSize(18).width("100%").textAlign(TextAlign.Center).border({ width: 1.5})
+          }
+          // 这两行加上 就具备了拖拽的能力
+          .draggable(true)
+          .onDragStart((event: DragEvent) => {
+            console.log("container drag start !!!  current index is => ", index);
+            // let text: UDC.PlainText = new UDC.PlainText();
+            // text.textContent = String(item);
+            // let data: UDC.UnifiedData = new UDC.UnifiedData(text);
+            // event.setData(data);
+            this.currentItem = item;
+            return { builder: this.listBuilder(item)};
+          })
+          .onDragEnd(() => {
+            console.log("list onDragEnd");
+            if (!this.listContainerRange) {
+              this.data.splice(this.data.indexOf(this.currentItem), 1);
+            }
+          })
+          // .onDrop((event: DragEvent, extraParams: string) => {
+            // 固定写法
+            // let dragData:UnifiedData = event.getData() as UnifiedData;
+            // if (dragData) {
+            // 如果不为 空，取拖拽结果
+            // const arr: Array<UDC.UnifiedRecord> = event.getData().getRecords();
+            // if(arr.length > 0) {
+            //   console.log("onDragLeave, delete data");
+            // }
+            // }
+          // })
+          .height(40)
+        })
+      }.backgroundColor(Color.Pink)
+      .width("50%")
+      .height("60%")
+      .allowDrop([UTD.UniformDataType.ENTITY])
+      .onDrop(() => {
+        console.log("List onDrop event trigger");
+      })
+      .onDragEnter(() => {
+        console.log("list onDragEnter")
+        this.listContainerRange = true;
+      })
+      .onDragLeave((event: DragEvent, extraParams: string) => {
+        console.log("List onDragLeave ");
+        this.listContainerRange = false;
+      })
+
+      Button("plus").onClick(() => {
+        this.data.push(this.historyTotal++);
+      })
+    }.width("100%").height("100%")
+  }
+}
\ No newline at end of file
-- 
Gitee