Prevent window drag from menus

Author: devklick

src/components/BorderedApp/BorderedApp.tsx

@@ -78,12 +78,12 @@ function BorderedApp({
       <div className="bordered-app__corner-ne" ref={resizeHandleNE} />
       <div className="bordered-app__edge-e" ref={resizeHandleE} />
       <div
-        className="bordered-app__title-bar"
+        className="bordered-app__title-bar drag-to-move"
         ref={moveHandle}
         onDoubleClick={maximize}
       >
-        <div className="bordered-app__window-menus-wrapper">
-          <div className="bordered-app__window-menus">
+        <div className="bordered-app__window-menus-wrapper drag-to-move">
+          <div className="bordered-app__window-menus drag-to-move">
             {menus?.map((m) => (
               <BorderedAppMenu
                 title={m.title}
@@ -93,10 +93,10 @@ function BorderedApp({
             ))}
           </div>
         </div>
-        <div className="bordered-app__title-wrapper">
-          <div className="bordered-app__title">{title}</div>
+        <div className="bordered-app__title-wrapper drag-to-move">
+          <div className="bordered-app__title drag-to-move">{title}</div>
         </div>
-        <div className="bordered-app__window-buttons-wrapper">
+        <div className="bordered-app__window-buttons-wrapper drag-to-move">
           <div className="bordered-app__window-buttons">
             <div
               className="bordered-app__window-button minimize"

src/hooks/useDragToMove.ts

@@ -10,14 +10,6 @@ import { Rect } from "./useDragToResize";
 
 // https://stackoverflow.com/a/39192992/6236042
 
-type StyledElement = {
-  style: CSSStyleDeclaration;
-};
-
-function hasStyle(value: unknown): value is StyledElement {
-  return !!value && typeof value === "object" && "style" in value;
-}
-
 interface UseDraggableProps {
   /**
    * A reference to the element that can be used to move the draggable element.
@@ -35,29 +27,23 @@ const useDragToMove = ({ moveRef = null, elementRect }: UseDraggableProps) => {
   const ref = useRef<HTMLElement | null>(null);
 
   const unsubscribe = useRef<VoidFunction>();
-  const moveHandle: RefCallback<HTMLElement> = useCallback(
-    (elem) => {
-      ref.current = elem;
-      if (unsubscribe.current) {
-        unsubscribe.current;
-      }
-      if (!elem) {
-        return;
-      }
-      const handleMouseDown = (e: MouseEvent) => {
-        const elem = moveRef?.current ?? e.target;
-        if (hasStyle(elem)) {
-          elem.style.userSelect = "none";
-        }
-        setPressed(true);
-      };
-      elem.addEventListener("mousedown", handleMouseDown);
-      unsubscribe.current = () => {
-        elem.removeEventListener("mousedown", handleMouseDown);
-      };
-    },
-    [moveRef]
-  );
+  const moveHandle: RefCallback<HTMLElement> = useCallback((elem) => {
+    ref.current = elem;
+    if (unsubscribe.current) {
+      unsubscribe.current;
+    }
+    if (!elem) {
+      return;
+    }
+    const handleMouseDown = (e: MouseEvent) => {
+      if (!(e.target as HTMLElement).classList.contains("drag-to-move")) return;
+      setPressed(true);
+    };
+    elem.addEventListener("mousedown", handleMouseDown);
+    unsubscribe.current = () => {
+      elem.removeEventListener("mousedown", handleMouseDown);
+    };
+  }, []);
 
   useEffect(() => {
     if (!pressed) {
@@ -82,11 +68,7 @@ const useDragToMove = ({ moveRef = null, elementRect }: UseDraggableProps) => {
         elem.style.top = `${elementRect.current.top}px`;
       }
     );
-    const handleMouseUp = (e: MouseEvent) => {
-      const elem = moveRef?.current ?? e.target;
-      if (hasStyle(elem)) {
-        elem.style.userSelect = "auto";
-      }
+    const handleMouseUp = () => {
       setPressed(false);
     };
     // subscribe to mousemove and mouseup on document, otherwise you