From 065df5cc9eee11e607c8988bc19e0d21c0587bf9 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E8=A7=89?= <huan0016@gmail.com>
Date: Fri, 13 Oct 2023 01:07:36 +0800
Subject: [PATCH] =?UTF-8?q?=E6=8B=96=E6=94=BE=E4=BA=8B=E4=BB=B6?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 public/weigets.js | 35 ++++++++++++++++++++++++++++++-----
 1 file changed, 30 insertions(+), 5 deletions(-)

diff --git a/public/weigets.js b/public/weigets.js
index 65ec0f0..48a89e1 100644
--- a/public/weigets.js
+++ b/public/weigets.js
@@ -1,4 +1,4 @@
-export function createElement({ innerText, textContent, onclick, onchange, onkeydown, onmouseenter, onmouseleave, readOnly, children = [], dataset, style, classList = [], ...attributes }, tagName = 'div') {
+export function createElement({ innerText, textContent, onclick, onchange, ondrop, ondragover, ondragleave, onkeydown, onmouseenter, onmouseleave, readOnly, children = [], dataset, style, classList = [], ...attributes }, tagName = 'div') {
     const element = document.createElement(tagName)
     for (const key in attributes) element.setAttribute(key, attributes[key])
     if (style) Object.assign(element.style, style)
@@ -13,6 +13,9 @@ export function createElement({ innerText, textContent, onclick, onchange, onkey
     if (children) children.forEach(child => element.appendChild(child))
     if (onmouseenter) element.onmouseenter = onmouseenter
     if (onmouseleave) element.onmouseleave = onmouseleave
+    if (ondrop) element.ondrop = ondrop
+    if (ondragover) element.ondragover = ondragover
+    if (ondragleave) element.ondragleave = ondragleave
     return element
 }
 
@@ -43,7 +46,7 @@ export function Avatar(options) {
 }
 
 export function UploadMusic(options) {
-    const text = createElement({
+    const drop = createElement({
         textContent: '点击或拖拽音乐到此处共享您的音乐',
         style: {
             width: '100%',
@@ -87,10 +90,32 @@ export function UploadMusic(options) {
             input.click()
         },
         onmouseenter: event => {
-            text.style.display = 'block'
+            drop.style.display = 'block'
         },
         onmouseleave: event => {
-            text.style.display = 'none'
+            drop.style.display = 'none'
+        },
+        // 如果拖拽到了子元素上, 也要触发父元素的事件
+        ondragover: event => {
+            console.log('dragover')
+            event.preventDefault()
+            event.stopPropagation()
+            event.dataTransfer.dropEffect = 'copy'
+            drop.style.display = 'block'
+        },
+        ondrop: event => {
+            console.log('drop')
+            event.preventDefault()
+            event.stopPropagation()
+            const files = Array.from(event.dataTransfer.files)
+            if (files.length === 0) return console.log('没有文件')
+            console.log('files', files)
+            options.onchange(files)
+        },
+        ondragleave: event => {
+            event.preventDefault()
+            event.stopPropagation()
+            drop.style.display = 'none'
         },
         children: [
             // 绘制一个云朵上传图标(别放弃...还有我呢!)
@@ -141,7 +166,7 @@ export function UploadMusic(options) {
                     })
                 ]
             }),
-            text
+            drop
             //createElement({
             //    style: {
             //        position: 'absolute',