Move sortable to drag overlay

src/components/Sortable.js

@@ -14,7 +14,7 @@ function Sortable({ id, children }) {
   const style = {
     cursor: "pointer",
     touchAction: "none",
-    opacity: isDragging ? 0.5 : undefined,
+    opacity: isDragging ? 0.25 : undefined,
     transform:
       transform && `translate3d(${transform.x}px, ${transform.y}px, 0px)`,
     zIndex: isDragging ? 100 : 0,

src/components/map/MapTiles.js

@@ -1,7 +1,8 @@
-import React from "react";
+import React, { useState } from "react";
+import { createPortal } from "react-dom";
 import { Flex, Box, Text, IconButton, Close, Grid } from "theme-ui";
 import SimpleBar from "simplebar-react";
-import { DndContext } from "@dnd-kit/core";
+import { DndContext, DragOverlay } from "@dnd-kit/core";
 import { SortableContext, arrayMove } from "@dnd-kit/sortable";
 
 import RemoveMapIcon from "../../icons/RemoveMapIcon";
@@ -35,6 +36,7 @@ function MapTiles({
 }) {
   const { databaseStatus } = useDatabase();
   const layout = useResponsiveLayout();
+  const [dragId, setDragId] = useState();
 
   let hasMapState = false;
   for (let state of selectedMapStates) {
@@ -74,7 +76,12 @@ function MapTiles({
 
   const multipleSelected = selectedMaps.length > 1;
 
+  function handleDragStart({ active }) {
+    setDragId(active.id);
+  }
+
   function handleDragEnd({ active, over }) {
+    setDragId();
     if (active && over && active.id !== over.id) {
       const oldIndex = groups.indexOf(active.id);
       const newIndex = groups.indexOf(over.id);
@@ -83,7 +90,7 @@ function MapTiles({
   }
 
   return (
-    <DndContext onDragEnd={handleDragEnd}>
+    <DndContext onDragStart={handleDragStart} onDragEnd={handleDragEnd}>
       <SortableContext items={groups}>
         <Box sx={{ position: "relative" }}>
           <FilterBar
@@ -177,6 +184,12 @@ function MapTiles({
             </Flex>
           )}
         </Box>
+        {createPortal(
+          <DragOverlay>
+            {dragId && mapToTile(maps.find((maps) => maps.id === dragId))}
+          </DragOverlay>,
+          document.body
+        )}
       </SortableContext>
     </DndContext>
   );

src/components/token/TokenTiles.js

@@ -1,7 +1,8 @@
-import React from "react";
+import React, { useState } from "react";
+import { createPortal } from "react-dom";
 import { Flex, Box, Text, IconButton, Close, Grid } from "theme-ui";
 import SimpleBar from "simplebar-react";
-import { DndContext } from "@dnd-kit/core";
+import { DndContext, DragOverlay } from "@dnd-kit/core";
 import { SortableContext, arrayMove } from "@dnd-kit/sortable";
 
 import RemoveTokenIcon from "../../icons/RemoveTokenIcon";
@@ -34,6 +35,7 @@ function TokenTiles({
 }) {
   const { databaseStatus } = useDatabase();
   const layout = useResponsiveLayout();
+  const [dragId, setDragId] = useState();
 
   let hasSelectedDefaultToken = selectedTokens.some(
     (token) => token.type === "default"
@@ -77,7 +79,12 @@ function TokenTiles({
     }
   }
 
+  function handleDragStart({ active }) {
+    setDragId(active.id);
+  }
+
   function handleDragEnd({ active, over }) {
+    setDragId();
     if (active && over && active.id !== over.id) {
       const oldIndex = groups.indexOf(active.id);
       const newIndex = groups.indexOf(over.id);
@@ -86,7 +93,7 @@ function TokenTiles({
   }
 
   return (
-    <DndContext onDragEnd={handleDragEnd}>
+    <DndContext onDragStart={handleDragStart} onDragEnd={handleDragEnd}>
       <SortableContext items={groups}>
         <Box sx={{ position: "relative" }}>
           <FilterBar
@@ -181,6 +188,12 @@ function TokenTiles({
             </Flex>
           )}
         </Box>
+        {createPortal(
+          <DragOverlay>
+            {dragId && tokenToTile(tokens.find((token) => token.id === dragId))}
+          </DragOverlay>,
+          document.body
+        )}
       </SortableContext>
     </DndContext>
   );