fixed drag behavoir

2023-02-14 01:32:11 +05:00
parent 4c65362cce
commit a5cc580de7
5 changed files with 48 additions and 57 deletions
@@ -18,8 +18,10 @@
        "react": "^18.2.0",
        "react-currency-input-field": "^3.6.9",
        "react-dom": "^18.2.0",
+        "react-indiana-drag-scroll": "^3.0.3-alpha",
        "react-input-range": "^1.3.0",
        "react-number-format": "^5.1.2",
+        "react-redux": "^8.0.5",
        "react-scripts": "5.0.1",
        "react-slider": "^2.0.4",
        "react-use-draggable-scroll": "^0.2.3",
@@ -3869,8 +3871,6 @@
      "version": "3.3.1",
      "resolved": "https://registry.npmjs.org/@types/hoist-non-react-statics/-/hoist-non-react-statics-3.3.1.tgz",
      "integrity": "sha512-iMIqiko6ooLrTh1joXodJK5X9xeEALT1kM5G3ZLhD3hszxBdIEd5C75U834D9mLcINgD4OyZf5uQXjkuYydWvA==",
-      "optional": true,
-      "peer": true,
      "dependencies": {
        "@types/react": "*",
        "hoist-non-react-statics": "^3.3.0"
@@ -4278,9 +4278,7 @@
    "node_modules/@types/use-sync-external-store": {
      "version": "0.0.3",
      "resolved": "https://registry.npmjs.org/@types/use-sync-external-store/-/use-sync-external-store-0.0.3.tgz",
-      "integrity": "sha512-EwmlvuaxPNej9+T4v5AuBPJa2x2UOJVdjCtDHgcDqitUeOtjnJKJ+apYjVcAoBEMjKW1VVFGZLUb5+qqa09XFA==",
-      "optional": true,
-      "peer": true
+      "integrity": "sha512-EwmlvuaxPNej9+T4v5AuBPJa2x2UOJVdjCtDHgcDqitUeOtjnJKJ+apYjVcAoBEMjKW1VVFGZLUb5+qqa09XFA=="
    },
    "node_modules/@types/ws": {
      "version": "8.5.3",
@@ -8719,8 +8717,6 @@
      "version": "3.3.2",
      "resolved": "https://registry.npmjs.org/hoist-non-react-statics/-/hoist-non-react-statics-3.3.2.tgz",
      "integrity": "sha512-/gGivxi8JPKWNm/W0jSmzcMPpfpPLc3dY/6GxhX2hQ9iGj3aDfklV4ET7NjKpSinLpJ5vafa9iiGIEZg10SfBw==",
-      "optional": true,
-      "peer": true,
      "dependencies": {
        "react-is": "^16.7.0"
      }
@@ -8728,9 +8724,7 @@
    "node_modules/hoist-non-react-statics/node_modules/react-is": {
      "version": "16.13.1",
      "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
-      "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==",
-      "optional": true,
-      "peer": true
+      "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ=="
    },
    "node_modules/hoopy": {
      "version": "0.1.4",
@@ -14395,6 +14389,19 @@
      "resolved": "https://registry.npmjs.org/react-error-overlay/-/react-error-overlay-6.0.11.tgz",
      "integrity": "sha512-/6UZ2qgEyH2aqzYZgQPxEnz33NJ2gNsnHA2o5+o4wW9bLM/JYQitNP9xPhsXwC08hMMovfGe/8retsdDsczPRg=="
    },
+    "node_modules/react-indiana-drag-scroll": {
+      "version": "3.0.3-alpha",
+      "resolved": "https://registry.npmjs.org/react-indiana-drag-scroll/-/react-indiana-drag-scroll-3.0.3-alpha.tgz",
+      "integrity": "sha512-Bo8Ium/CGs0oIYzk4wVDphuhrf2QRvLKTLO/+21M+czF1EQEII4w1UqoFs4lIGd84YpVL8UDXIcy2m9yzsFuRQ==",
+      "engines": {
+        "node": ">=8",
+        "npm": ">=5"
+      },
+      "peerDependencies": {
+        "react": "^15.0.0 || ^16.0.0 || ^17.0.0 || ^18.0.0",
+        "react-dom": "^15.0.0 || ^16.0.0 || ^17.0.0 || ^18.0.0"
+      }
+    },
    "node_modules/react-input-range": {
      "version": "1.3.0",
      "resolved": "https://registry.npmjs.org/react-input-range/-/react-input-range-1.3.0.tgz",
@@ -14429,8 +14436,6 @@
      "version": "8.0.5",
      "resolved": "https://registry.npmjs.org/react-redux/-/react-redux-8.0.5.tgz",
      "integrity": "sha512-Q2f6fCKxPFpkXt1qNRZdEDLlScsDWyrgSj0mliK59qU6W5gvBiKkdMEG2lJzhd1rCctf0hb6EtePPLZ2e0m1uw==",
-      "optional": true,
-      "peer": true,
      "dependencies": {
        "@babel/runtime": "^7.12.1",
        "@types/hoist-non-react-statics": "^3.3.1",
@@ -14468,9 +14473,7 @@
    "node_modules/react-redux/node_modules/react-is": {
      "version": "18.2.0",
      "resolved": "https://registry.npmjs.org/react-is/-/react-is-18.2.0.tgz",
-      "integrity": "sha512-xWGDIW6x921xtzPkhiULtthJHoJvBbF3q26fzloPCK0hsvxtPVelvftw3zjbHWSkR2km9Z+4uxbDDK/6Zw9B8w==",
-      "optional": true,
-      "peer": true
+      "integrity": "sha512-xWGDIW6x921xtzPkhiULtthJHoJvBbF3q26fzloPCK0hsvxtPVelvftw3zjbHWSkR2km9Z+4uxbDDK/6Zw9B8w=="
    },
    "node_modules/react-refresh": {
      "version": "0.11.0",
@@ -16199,9 +16202,9 @@
      }
    },
    "node_modules/typescript": {
-      "version": "4.9.3",
-      "resolved": "https://registry.npmjs.org/typescript/-/typescript-4.9.3.tgz",
-      "integrity": "sha512-CIfGzTelbKNEnLpLdGFgdyKhG23CKdKgQPOBc+OUNrkJ2vr+KSzsSV5kq5iWhEQbok+quxgGzrAtGWCyU7tHnA==",
+      "version": "4.9.5",
+      "resolved": "https://registry.npmjs.org/typescript/-/typescript-4.9.5.tgz",
+      "integrity": "sha512-1FXk9E2Hm+QzZQ7z+McJiHL4NW1F2EzMu9Nq9i3zAaGqibafqYwCVU6WyWAuyQRRzOlxou8xZSyXLEN8oKj24g==",
      "peer": true,
      "bin": {
        "tsc": "bin/tsc",
@@ -16359,8 +16362,6 @@
      "version": "1.2.0",
      "resolved": "https://registry.npmjs.org/use-sync-external-store/-/use-sync-external-store-1.2.0.tgz",
      "integrity": "sha512-eEgnFxGQ1Ife9bzYs6VLi8/4X6CObHMw9Qr9tPY43iKwsPw8xE8+EFsf/2cFZ5S3esXgpWgtSCtLNS41F+sKPA==",
-      "optional": true,
-      "peer": true,
      "peerDependencies": {
        "react": "^16.8.0 || ^17.0.0 || ^18.0.0"
      }
@@ -20011,8 +20012,6 @@
      "version": "3.3.1",
      "resolved": "https://registry.npmjs.org/@types/hoist-non-react-statics/-/hoist-non-react-statics-3.3.1.tgz",
      "integrity": "sha512-iMIqiko6ooLrTh1joXodJK5X9xeEALT1kM5G3ZLhD3hszxBdIEd5C75U834D9mLcINgD4OyZf5uQXjkuYydWvA==",
-      "optional": true,
-      "peer": true,
      "requires": {
        "@types/react": "*",
        "hoist-non-react-statics": "^3.3.0"
@@ -20367,9 +20366,7 @@
    "@types/use-sync-external-store": {
      "version": "0.0.3",
      "resolved": "https://registry.npmjs.org/@types/use-sync-external-store/-/use-sync-external-store-0.0.3.tgz",
-      "integrity": "sha512-EwmlvuaxPNej9+T4v5AuBPJa2x2UOJVdjCtDHgcDqitUeOtjnJKJ+apYjVcAoBEMjKW1VVFGZLUb5+qqa09XFA==",
-      "optional": true,
-      "peer": true
+      "integrity": "sha512-EwmlvuaxPNej9+T4v5AuBPJa2x2UOJVdjCtDHgcDqitUeOtjnJKJ+apYjVcAoBEMjKW1VVFGZLUb5+qqa09XFA=="
    },
    "@types/ws": {
      "version": "8.5.3",
@@ -23607,8 +23604,6 @@
      "version": "3.3.2",
      "resolved": "https://registry.npmjs.org/hoist-non-react-statics/-/hoist-non-react-statics-3.3.2.tgz",
      "integrity": "sha512-/gGivxi8JPKWNm/W0jSmzcMPpfpPLc3dY/6GxhX2hQ9iGj3aDfklV4ET7NjKpSinLpJ5vafa9iiGIEZg10SfBw==",
-      "optional": true,
-      "peer": true,
      "requires": {
        "react-is": "^16.7.0"
      },
@@ -23616,9 +23611,7 @@
        "react-is": {
          "version": "16.13.1",
          "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
-          "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==",
-          "optional": true,
-          "peer": true
+          "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ=="
        }
      }
    },
@@ -27527,6 +27520,12 @@
      "resolved": "https://registry.npmjs.org/react-error-overlay/-/react-error-overlay-6.0.11.tgz",
      "integrity": "sha512-/6UZ2qgEyH2aqzYZgQPxEnz33NJ2gNsnHA2o5+o4wW9bLM/JYQitNP9xPhsXwC08hMMovfGe/8retsdDsczPRg=="
    },
+    "react-indiana-drag-scroll": {
+      "version": "3.0.3-alpha",
+      "resolved": "https://registry.npmjs.org/react-indiana-drag-scroll/-/react-indiana-drag-scroll-3.0.3-alpha.tgz",
+      "integrity": "sha512-Bo8Ium/CGs0oIYzk4wVDphuhrf2QRvLKTLO/+21M+czF1EQEII4w1UqoFs4lIGd84YpVL8UDXIcy2m9yzsFuRQ==",
+      "requires": {}
+    },
    "react-input-range": {
      "version": "1.3.0",
      "resolved": "https://registry.npmjs.org/react-input-range/-/react-input-range-1.3.0.tgz",
@@ -27553,8 +27552,6 @@
      "version": "8.0.5",
      "resolved": "https://registry.npmjs.org/react-redux/-/react-redux-8.0.5.tgz",
      "integrity": "sha512-Q2f6fCKxPFpkXt1qNRZdEDLlScsDWyrgSj0mliK59qU6W5gvBiKkdMEG2lJzhd1rCctf0hb6EtePPLZ2e0m1uw==",
-      "optional": true,
-      "peer": true,
      "requires": {
        "@babel/runtime": "^7.12.1",
        "@types/hoist-non-react-statics": "^3.3.1",
@@ -27567,9 +27564,7 @@
        "react-is": {
          "version": "18.2.0",
          "resolved": "https://registry.npmjs.org/react-is/-/react-is-18.2.0.tgz",
-          "integrity": "sha512-xWGDIW6x921xtzPkhiULtthJHoJvBbF3q26fzloPCK0hsvxtPVelvftw3zjbHWSkR2km9Z+4uxbDDK/6Zw9B8w==",
-          "optional": true,
-          "peer": true
+          "integrity": "sha512-xWGDIW6x921xtzPkhiULtthJHoJvBbF3q26fzloPCK0hsvxtPVelvftw3zjbHWSkR2km9Z+4uxbDDK/6Zw9B8w=="
        }
      }
    },
@@ -28853,9 +28848,9 @@
      }
    },
    "typescript": {
-      "version": "4.9.3",
-      "resolved": "https://registry.npmjs.org/typescript/-/typescript-4.9.3.tgz",
-      "integrity": "sha512-CIfGzTelbKNEnLpLdGFgdyKhG23CKdKgQPOBc+OUNrkJ2vr+KSzsSV5kq5iWhEQbok+quxgGzrAtGWCyU7tHnA==",
+      "version": "4.9.5",
+      "resolved": "https://registry.npmjs.org/typescript/-/typescript-4.9.5.tgz",
+      "integrity": "sha512-1FXk9E2Hm+QzZQ7z+McJiHL4NW1F2EzMu9Nq9i3zAaGqibafqYwCVU6WyWAuyQRRzOlxou8xZSyXLEN8oKj24g==",
      "peer": true
    },
    "unbox-primitive": {
@@ -28957,8 +28952,6 @@
      "version": "1.2.0",
      "resolved": "https://registry.npmjs.org/use-sync-external-store/-/use-sync-external-store-1.2.0.tgz",
      "integrity": "sha512-eEgnFxGQ1Ife9bzYs6VLi8/4X6CObHMw9Qr9tPY43iKwsPw8xE8+EFsf/2cFZ5S3esXgpWgtSCtLNS41F+sKPA==",
-      "optional": true,
-      "peer": true,
      "requires": {}
    },
    "util-deprecate": {
@@ -13,8 +13,10 @@
    "react": "^18.2.0",
    "react-currency-input-field": "^3.6.9",
    "react-dom": "^18.2.0",
+    "react-indiana-drag-scroll": "^3.0.3-alpha",
    "react-input-range": "^1.3.0",
    "react-number-format": "^5.1.2",
+    "react-redux": "^8.0.5",
    "react-scripts": "5.0.1",
    "react-slider": "^2.0.4",
    "react-use-draggable-scroll": "^0.2.3",
@@ -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>
  );
 };
@@ -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>
          ))}
@@ -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) => (