feat:拖拽排序实现

dataelement · Jun 28, 2024 · 3b6e465 · 3b6e465
1 parent 15ac5e9
commit 3b6e465
Show file tree

Hide file tree

Showing 2 changed files with 14 additions and 3 deletions.
diff --git a/src/frontend/src/components/bs-comp/sheets/TaggingSheet.tsx b/src/frontend/src/components/bs-comp/sheets/TaggingSheet.tsx
@@ -1,3 +1,4 @@
+import { useState } from "react";
 import {
     Sheet,
     SheetContent,
@@ -7,11 +8,20 @@ import {
 import { DragDropContext, Draggable, Droppable } from 'react-beautiful-dnd';
 
 export default function TaggingSheet({children}) {
-    const buttons = [
+    const init = [
         {id:'01',name:'Button01'},
         {id:'02',name:'Button02'},
         {id:'03',name:'Button03'},
     ]
+    const [buttons, setButtons] = useState(init)
+
+    const handleDragEnd = (result) => {
+        if(!result.destination) return
+        const newButtons = init
+        const [moveItem] = newButtons.splice(result.source.index, 1)
+        newButtons.splice(result.destination.index, 0, moveItem)
+        setButtons(newButtons)
+    }
 
     return <Sheet>
         <SheetTrigger asChild>{children}</SheetTrigger>
@@ -22,7 +32,7 @@ export default function TaggingSheet({children}) {
 
                 </div>
                 <div className="bg-slate-300">
-                    <DragDropContext onDragEnd={() => console.log('-------------')}>
+                    <DragDropContext onDragEnd={handleDragEnd}>
                         <Droppable droppableId={'list'}>
                             {(provided) => (
                                 <div {...provided.droppableProps} ref={provided.innerRef}>
@@ -36,6 +46,7 @@ export default function TaggingSheet({children}) {
                                         )}
                                     </Draggable>
                                     ))}
+                                    {provided.placeholder}
                                 </div>
                             )}
                         </Droppable>

diff --git a/src/frontend/vite.config.ts b/src/frontend/vite.config.ts
@@ -6,7 +6,7 @@ import svgr from "vite-plugin-svgr";
 const apiRoutes = ["^/api/", "/health"];
 import path from "path";
 // Use environment variable to determine the target.
-const target = process.env.VITE_PROXY_TARGET || "http://127.0.0.1:7860";
+const target = process.env.VITE_PROXY_TARGET || "http://192.168.106.120:3002";
 
 const proxyTargets = apiRoutes.reduce((proxyObj, route) => {
   proxyObj[route] = {