onReorder в framer motion не работает для изображений.

Содержание

Вопрос или проблема
Ответ или решение
Проблема с обработкой событий указателя
Почему замена pic работает
Рекомендуемое решение
Заключение

Вопрос или проблема

Я использую библиотеку framer-motion для переупорядочивания изображений галереи

import React, { useState } from "react";
import { Reorder } from "framer-motion";

const Test = () => {
  const [items, setItems] = useState([
    { id: 1, pic: "https://via.placeholder.com/150" },
    { id: 2, pic: "https://via.placeholder.com/150" },
    { id: 3, pic: "https://via.placeholder.com/150" }
  ]);

  return (
   <div className="text-white">
    <p className="text-center text-white">Тестирование прокрутки</p>
    <Reorder.Group
      values={items}
      onReorder={(newOrder) => setItems(newOrder)}
    >
      {items.map((item) => (
        <Reorder.Item key={item.id} value={item}>
          <div>
            <p>Элемент {item.id}</p>
            <img src={item.pic} alt={`Изображение ${item.id}`} />
          </div>
        </Reorder.Item>
      ))}
    </Reorder.Group>
   </div>
  );
};

export default Test;

Это не переупорядочивает так. Я пытался сделать console.log внутри функции onReorder и заметил, что она не вызывается. Затем я изменил значение “pic” каждого элемента

const [items, setItems] = useState([
    { id: 1, pic: "dghge" },
    { id: 2, pic: "htegb" },
    { id: 3, pic: "etyhet" }
  ]);

После этого переупорядочивание заработало. Как я могу это исправить и в чем причина этого?

Я думаю, ваша проблема в том, что элементы img обрабатывают события указателя по умолчанию.

Поэтому они не реагируют на события указателя так же, как текст или другие блочные элементы.

Чтобы это исправить, вы можете убедиться, что элемент img может участвовать в событиях указателя, добавив pointer-events: none к изображению. Это позволит Reorder.Item обрабатывать перетаскивание для всего контейнера, включая изображение.

Я создал файл stackblitz, чтобы визуализировать это.

Ответ или решение

Когда вы работаете с библиотекой framer-motion для изменения порядка изображений в галерее, проблема, с которой вы столкнулись, может быть связана с тем, как элементы обрабатывают события указателя. Давайте более подробно рассмотрим вашу ситуацию и причины невозможности перетаскивания изображений.

Проблема с обработкой событий указателя

Ваш код использует компонент Reorder.Item для каждого изображения, однако, по умолчанию, элементы <img> обрабатывают события указателя иначе, чем текстовые или блочные элементы. Это может препятствовать правильной работе функции onReorder. Когда вы пытаетесь перетаскивать элемент с изображением, не происходит инициировании события onReorder, и поэтому функция не вызывается.

Почему замена `pic` работает

Когда вы изменили значения pic на произвольные строки, это стало решением проблемы, потому что это изменило тег <img> на элемент, который не обрабатывает правила событий указателя так, как это делают изображения. Однако это не является идеальным решением, так как вы хотите, чтобы изображение отображалось нормально.

Рекомендуемое решение

Как упоминалось ранее, вам нужно внести небольшие изменения в стили вашего изображения, чтобы обеспечить взаимодействие элемента с событиями указателя. Вы можете сделать это, добавив стиль pointer-events: none к элементу <img>. Это позволит контейнеру Reorder.Item захватывать события перетаскивания, которые ранее были перехвачены элементом изображения.

Вот как вы можете изменить ваш код:

import React, { useState } from "react";
import { Reorder } from "framer-motion";

const Test = () => {
  const [items, setItems] = useState([
    { id: 1, pic: "https://via.placeholder.com/150" },
    { id: 2, pic: "https://via.placeholder.com/150" },
    { id: 3, pic: "https://via.placeholder.com/150" }
  ]);

  return (
    <div className="text-white">
      <p className="text-center text-white">Testing Scroll</p>
      <Reorder.Group
        values={items}
        onReorder={(newOrder) => setItems(newOrder)}
      >
        {items.map((item) => (
          <Reorder.Item key={item.id} value={item}>
            <div>
              <p>Item {item.id}</p>
              <img src={item.pic} alt={`Pic ${item.id}`} style={{ pointerEvents: 'none' }} />
            </div>
          </Reorder.Item>
        ))}
      </Reorder.Group>
    </div>
  );
};

export default Test;

Заключение

Эти изменения должны помочь решить проблему с перетаскиванием изображений в вашем приложении. Обеспечение корректной обработки указателей позволит вашему интерфейсу работать более гладко и интуитивно.

В случае если вышеуказанный метод не решит вашу проблему, пожалуйста, убедитесь, что у вас обновлена последняя версия библиотеки framer-motion, и проверьте консоль на наличие других возможных ошибок, которые могут мешать выполнению вашего кода.

Если у вас есть дополнительные вопросы или вам требуется помощь с другими аспектами вашего проекта, не стесняйтесь обращаться!