fix mobile drag

Author: xqdoo00o

README.md

@@ -22,7 +22,7 @@ Pure Javascript ChatGPT demo based on OpenAI API
 
 ## Demo
 
-[在线预览](https://xqdoo00o.github.io/chatgpt-web/) （使用需配置自定义API key和自定义接口）
+[在线预览](https://xqdoo00o.github.io/chatgpt-web/) （使用需配置OpenAI接口和API密钥）
 
 ## 使用方法
 ### **注意：部署反代接口请注意OpenAI的[支持地区](https://platform.openai.com/docs/supported-countries)，部署在不支持地区的服务器可能导致封号！最好配置https，公网以http方式明文传输API key非常不安全！**
@@ -36,7 +36,7 @@ ___
     - 不可正常访问`api.openai.com`，填写其反代地址（可使用[Cloudflare Worker](https://github.com/xqdoo00o/openai-proxy)等反代），注意：反代接口响应需添加跨域Header `Access-Control-Allow-Origin`
 - **同时部署HTML和OpenAI反代接口**
 
-    **注意：服务器需正常访问`api.openai.com`，网页不用设置自定义接口了**
+    **注意：服务器需正常访问`api.openai.com`，网页不用设置OpenAI接口了**
     - 使用nginx，示例配置如下
 
         ```
@@ -103,7 +103,7 @@ ___
 
 - 可选OpenAI接口地址，使用nginx或caddy部署反代后可以不设置。
 
-- 可选API密钥，默认不设置，**如需网页设置自定义API key使用，反代接口最好配置https，公网以http方式明文传输API key极易被中间人截获。**
+- 可选API密钥，默认不设置，**如需网页设置自定义API密钥使用，反代接口最好配置https，公网以http方式明文传输API key极易被中间人截获。**
 
 - 可选用户头像，可修改为任意图片地址。
 

index.html

@@ -2310,15 +2310,15 @@
     <script>
         const isMobile = navigator.userAgent.match(/iPhone|iPad|iPod|Android|BlackBerry|webOS/);
         if (isMobile) {
-            const script = document.createElement('script');
+            const script = document.createElement("script");
             script.src = "https://cdn.jsdelivr.net/gh/timruffles/[email protected]/release/index.min.js";
             script.defer = true;
             script.onload = () => {
                 MobileDragDrop.polyfill();
             }
             document.body.appendChild(script);
-            const link = document.createElement('link');
-            link.rel = 'stylesheet';
+            const link = document.createElement("link");
+            link.rel = "stylesheet";
             link.href = "https://cdn.jsdelivr.net/gh/timruffles/[email protected]/release/default.css";
             document.body.appendChild(link);
         }
@@ -3119,8 +3119,8 @@
         }
         const formatDate = date => {
             const year = date.getFullYear();
-            const month = (date.getMonth() + 1).toString().padStart(2, '0');
-            const day = date.getDate().toString().padStart(2, '0');
+            const month = (date.getMonth() + 1).toString().padStart(2, "0");
+            const day = date.getDate().toString().padStart(2, "0");
             return `${year}-${month}-${day}`;
         }
         const checkBill = async () => {
@@ -3477,6 +3477,34 @@
         let activeChatEle;
         let operateChatIdx, operateFolderIdx;
         let dragLi, dragType, dragIdx;
+        let mobileDragOut;
+        const mobileDragStartEV = function (ev) {
+            if (mobileDragOut !== void 0) {
+                clearTimeout(mobileDragOut);
+                mobileDragOut = void 0;
+            }
+            mobileDragOut = setTimeout(() => {
+                this.setAttribute("draggable", "true");
+                this.dispatchEvent(ev);
+            }, 200);
+        };
+        if (isMobile) {
+            let stopDragOut = () => {
+                if (mobileDragOut !== void 0) {
+                    clearTimeout(mobileDragOut);
+                    mobileDragOut = void 0;
+                }
+            };
+            let stopDrag = () => {
+                stopDragOut();
+                document.querySelectorAll("[draggable=true]").forEach(ele => {
+                    ele.setAttribute("draggable", "false");
+                })
+            };
+            document.body.addEventListener("touchmove", stopDragOut);
+            document.body.addEventListener("touchend", stopDrag);
+            document.body.addEventListener("touchcancel", stopDrag);
+        };
         const delDragIdx = () => {
             let chatIdx = chatIdxs.indexOf(dragIdx);
             if (chatIdx !== -1) {
@@ -3680,7 +3708,8 @@
             let folder = folderData[idx];
             let folderEle = document.createElement("div");
             folderEle.className = "folderLi";
-            folderEle.setAttribute("draggable", "true");
+            if (!isMobile) folderEle.setAttribute("draggable", "true");
+            else folderEle.ontouchstart = mobileDragStartEV;
             let headEle = document.createElement("div");
             headEle.className = "headLi";
             headEle.innerHTML = `<svg width="24" height="24"><use xlink:href="#expandFolderIcon" /></svg>
@@ -3718,12 +3747,13 @@
                 if (first) {chatPreview = first.content.slice(0, 30)}
             }
             chatEle.children[1].children[1].textContent = chatPreview;
-        }
+        };
         const chatEleAdd = (idx, appendChat = true) => {
             let chat = chatsData[idx];
             let chatEle = document.createElement("div");
             chatEle.className = "chatLi";
-            chatEle.setAttribute("draggable", "true");
+            if (!isMobile) chatEle.setAttribute("draggable", "true");
+            else chatEle.ontouchstart = mobileDragStartEV;
             chatEle.ondragstart = chatDragStartEv;
             chatEle.innerHTML = `<svg width="24" height="24"><use xlink:href="#chatIcon" /></svg>
                 <div class="chatInfo">