Merge pull request #187 from epam/EPMUII-8769-Drang-n-drop-fixing

fixing drag box
epam · Dec 20, 2023 · 9b903af · 9b903af
2 parents a553d35 + e6422a5
commit 9b903af
Show file tree

Hide file tree

Showing 3 changed files with 53 additions and 98 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/src/ui/DragAndDrop/DragAndDropContainer.jsx b/src/ui/DragAndDrop/DragAndDropContainer.jsx
@@ -1,65 +1,41 @@
-import React, { useCallback, useState } from 'react';
+import React, { useState } from 'react';
 import css from '../Main.module.css';
-import { DnDItemTypes } from '../Constants/DnDItemTypes';
-import { useDrag } from 'react-dnd';
 
 export const DragAndDropContainer = ({ children }) => {
-  const [position, setPosition] = useState({ top: 100, left: null });
-  const [isCanDrag, setIsCanDrag] = useState(false);
+  const [position, setPosition] = useState({ top: 100, left: 900 });
+  const [isDragging, setIsDragging] = useState(false);
+  const [offset, setOffset] = useState({ x: 0, y: 0 });
 
-  const checkEventTagName = useCallback(
-    (e) => {
-      e.target.tagName === 'DIV' ? setIsCanDrag(true) : setIsCanDrag(false);
-    },
-    [isCanDrag, setIsCanDrag]
-  );
+  const startDrag = (e) => {
+    if (e.target.tagName.toLowerCase() !== 'span') {
+      setIsDragging(true);
+      setOffset({
+        x: e.clientX - position.left,
+        y: e.clientY - position.top,
+      });
+    }
+  };
 
-  const getLeftPositionSettings = useCallback(
-    (e) => {
-      if (position.left === null) {
-        setPosition({
-          top: position.top,
-          left: window.innerWidth - e.currentTarget.offsetWidth - 25,
-        });
-      }
-    },
-    [position]
-  );
+  const stopDrag = () => {
+    setIsDragging(false);
+  };
 
-  const [{ isDragging }, drag, dragPreview] = useDrag(
-    () => ({
-      type: DnDItemTypes.SETTINGS,
-      item: { left: position.left, top: position.top, isCanDrag },
-      options: {
-        dropEffect: 'move',
-      },
-      end: (item, monitor) => {
-        const { x, y } = monitor.getDropResult();
-        const top = Math.round(item.top + y);
-        const left = Math.round(item.left + x);
-        setPosition({ top, left });
-      },
-      canDrag: () => {
-        return isCanDrag;
-      },
-      collect: (monitor) => ({
-        isDragging: monitor.isDragging(),
-      }),
-    }),
-    [position.left, position.top, isCanDrag]
-  );
+  const handleDrag = (e) => {
+    if (isDragging) {
+      const x = e.clientX - offset.x;
+      const y = e.clientY - offset.y;
+      setPosition({ left: x, top: y });
+    }
+  };
 
-  return isDragging ? (
-    <div style={{ display: 'none' }} ref={dragPreview}>
-      {children}
-    </div>
-  ) : (
+  return (
     <div
-      ref={drag}
-      onMouseDown={getLeftPositionSettings}
-      onMouseMove={checkEventTagName}
+      onMouseDown={startDrag}
+      onMouseUp={stopDrag}
+      onMouseMove={handleDrag}
       style={{
-        cursor: isCanDrag ? 'move' : 'default',
+        opacity: isDragging ? 0.5 : 1,
+        cursor: isDragging ? 'grabbing' : 'grab',
         top: position.top,
         left: position.left,
       }}

diff --git a/src/ui/Main.module.css b/src/ui/Main.module.css
@@ -189,13 +189,10 @@
     display: flex;
     flex-direction: column;
     position: absolute;
-    right: 25px;
-    top: 100px;
     background-color: var(--dark-gray);
     padding: 25px;
     width: 400px;
     opacity: var(--opacity);
-    cursor: all-scroll;
     border-radius: 24px;
     transition: opacity 300ms ease-in-out;
     z-index: 11;