fixed drag behavoir

src/components/DraggableGallery/DraggableGallery.js

@@ -1,18 +1,10 @@
 import "./DraggableGallery.css";
-
 import { Gallery } from "./components/Gallery/Gallery";
-import { useDraggable } from "react-use-draggable-scroll";
-import { useRef } from "react";
+import { ScrollContainer } from "react-indiana-drag-scroll";
+import "react-indiana-drag-scroll/dist/style.css";
 
 export const DraggableGallery = () => {
   const arrayLegend = ["Тип", "Площадь", "Стоимость", "Этаж", "Cрок Сдачи"];
-  const ref = useRef();
-
-  const { events } = useDraggable(ref, {
-    safeDisplacement: 20, // specify the drag sensitivity
-  });
-
-  console.log(events)
 
   return (
     <div className="legend-layout">
@@ -26,9 +18,13 @@ export const DraggableGallery = () => {
           ))}
         </div>
       </div>
-      <div ref={ref} {...events} className="gallery">
+      <ScrollContainer
+        hideScrollbars={false}
+        mouseScroll={{ ignoreElements: ".card-button-container" }}
+        className="gallery"
+      >
         <Gallery></Gallery>
-      </div>
+      </ScrollContainer>
     </div>
   );
 };

src/components/DraggableGallery/components/Gallery/Card/Card.js

@@ -11,12 +11,12 @@ export const Card = ({ card }) => {
   const dragControls = useDragControls();
   const pointArray = Array(6).fill(0);
   const onDrag = (e) => {
-      dragControls.start(e, { snapToCursor: true });
+    dragControls.start(e, { snapToCursor: true });
   };
 
   return (
     <Reorder.Item value={card} dragListener={false} dragControls={dragControls}>
-      <div className="card">
+      <div  className="card">
         <div className="card-image-container">
           <img className="card-image" src={card.img} alt="планнировка"></img>
         </div>
@@ -41,7 +41,7 @@ export const Card = ({ card }) => {
         </div>
       </div>
       <motion.div className="card-button-container">
-        <div onClick={(e) => onDrag(e)} className="drag-button">
+        <div id='88' onPointerDown={(e) => onDrag(e)} className="drag-button">
           {pointArray.map((i, index) => (
             <div key={Math.random(index)} className="point"></div>
           ))}

src/components/DraggableGallery/components/Gallery/Gallery.js

@@ -1,6 +1,6 @@
 import "./Gallery.css";
 import plan from "./planFlat.png";
-import { Reorder, useDragControls } from "framer-motion";
+import { Reorder } from "framer-motion";
 import { useState } from "react";
 import { Card } from "./Card/Card";
 
@@ -77,7 +77,7 @@ export const Gallery = ({}) => {
       className="list"
       axis="x"
       values={cards}
-      layoutScroll={true}
+      layoutScroll
       onReorder={setCards}
     >
       {cards.map((card, index) => (