编辑图片拖拽

app/my/createProfile/page.jsx

@@ -316,7 +316,6 @@ export default function CreateProfile() {
         // 新版本
         // superfan_price_list,
       };
-      debugger;
       const _data = await requireAPI(
         "POST",
         "/api/zone/create",

components/UploadImgs/index.js

@@ -1,10 +1,11 @@
 "use client";
 
 import React, { useEffect, useState } from "react";
-import { DotLoading, Image, Toast, ImageViewer, Modal } from "antd-mobile";
+import { DotLoading, Image, List, ImageViewer, Modal } from "antd-mobile";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { faAdd, faClose, faPlay } from "@fortawesome/free-solid-svg-icons";
 import { getVideoBase64 } from "@/utils/tools";
+import { DragDropContext, Draggable, Droppable } from "@hello-pangea/dnd";
 export default function UploadImgs({
   assets,
   getImgs,
@@ -21,7 +22,9 @@ export default function UploadImgs({
   const [frameImage, setFrameImage] = useState({ src: null, h: 0, w: 0 });
   useEffect(() => {
     if (existImages.length > 0) {
-      setFilesUrls(existImages.map((it) => it.url));
+      setFilesUrls(
+        existImages.map((it, index) => ({ url: it.url, id: `${index}` }))
+      );
     }
     if (videoSrc) {
       setVideoUrl(videoSrc);
@@ -38,7 +41,10 @@ export default function UploadImgs({
     var videoObj = document.createElement("video");
     const eles = Array.from(e.target.files);
     if (type == 1) {
-      const newFils = eles.map((it) => URL.createObjectURL(it));
+      const newFils = eles.map((it, index) => ({
+        url: URL.createObjectURL(it),
+        id: "new" + index,
+      }));
       setFilesUrls((old) => [...old, ...newFils]);
     } else {
       videoObj.onloadedmetadata = function (evt) {
@@ -112,22 +118,62 @@ export default function UploadImgs({
     // videoD.src = url;
     getVideoBase64(url).then((src) => {
       setFrameImage((old) => ({ ...old, src }));
-      setFilesUrls([src]);
+      setFilesUrls([{ url: src, id: "0" }]);
     });
   };
+  const reorder = (list, startIndex, endIndex) => {
+    const result = Array.from(list);
+    const [removed] = result.splice(startIndex, 1);
+    result.splice(endIndex, 0, removed);
 
+    return result;
+  };
+  const onDragEnd = (result) => {
+    if (!result.destination) return;
+    const newList = reorder(
+      assets,
+      result.source.index,
+      result.destination.index
+    );
+    getImgs([...newList]);
+    // const newArr=newList.map((it,index)=>({...it,url:it.url||URL.createObjectURL(it)}))
+    const newArr = newList.map((it, index) => {
+      if (it.url) {
+        return { url: it.url, id: `${index}` };
+      } else {
+        return { url: URL.createObjectURL(it), id: `${index}` };
+      }
+    });
+    setFilesUrls(newArr);
+  };
   return (
     <div>
-      <div className="grid grid-cols-4 gap-1">
-        {filesUrls.map((item, index) => {
-          return (
+      <DragDropContext onDragEnd={onDragEnd}>
+        <Droppable direction="horizontal" droppableId="droppable">
+          {(droppableProvided) => (
+            <div
+              className="mb-2 grid grid-cols-4 gap-1"
+              ref={droppableProvided.innerRef}
+            >
+              {filesUrls.map((item, index) => (
+                <Draggable key={item.id} draggableId={item.id} index={index}>
+                  {(provided, snapshot) => (
+                    <div
+                      ref={provided.innerRef}
+                      {...provided.draggableProps}
+                      {...provided.dragHandleProps}
+                      style={{
+                        ...provided.draggableProps.style,
+                        opacity: snapshot.isDragging ? 0.8 : 1,
+                      }}
+                    >
                       <div key={index} className="rounded relative">
                         <div
                           onClick={() => showPhotos(filesUrls, index)}
                           style={{ height: "calc(25vw - 0.75rem)" }}
                         >
                           <Image
-                  src={item}
+                            src={item.url}
                             width="100%"
                             height="100%"
                             className="rounded"
@@ -150,15 +196,22 @@ export default function UploadImgs({
                           </div>
                         )}
                       </div>
-          );
-        })}
+                    </div>
+                  )}
+                </Draggable>
+              ))}
+              {droppableProvided.placeholder}
+            </div>
+          )}
+        </Droppable>
+      </DragDropContext>
       {loading && (
         <div className="rounded border-[#ffffff80] text-[#ffffff80] flex flex-col justify-center items-center">
           <DotLoading />
           <p>上传中</p>
         </div>
       )}
-
+      <div className="grid grid-cols-4 gap-1">
         {type == 2 && filesUrls.length > 0 ? null : (
           <>
             <label htmlFor="uploadAvatarBtn">