Проблема с перетаскиванием предмета

[Vermilion]

Приветствую. В чем может быть проблема при перетаскивании предмета? Он просто остается на одном месте.
Использую TypeScript/NodeJs/React

Index.tsx

import React, { useEffect, useState } from 'react';
import { useSelector, useDispatch } from 'react-redux';
import { RootState } from './data';
import { openInventory, closeInventory } from './reducer';
import rpc from '../../../../shared/rpc';
import './styles.sass';

const Inventory: React.FC = () => {
  const dispatch = useDispatch();
  const { isOpen, inventoryData } = useSelector((state: RootState) => state.inventory);
  const [draggedItem, setDraggedItem] = useState<{ id: number; image: string } | null>(null);
  const [dragStartPos, setDragStartPos] = useState<{ x: number; y: number } | null>(null);

 

  const handleMouseMove = (event: MouseEvent) => {
    if (draggedItem && dragStartPos) {
      const offsetX = event.clientX - dragStartPos.x;
      const offsetY = event.clientY - dragStartPos.y;

      const draggingItem = document.querySelector('.inventory-item.dragging') as HTMLElement;
      if (draggingItem) {
        draggingItem.style.transform = `translate(${offsetX}px, ${offsetY}px)`;
      }
    }
  };


  useEffect(() => {
    // Добавляем слушатель события mousemove при открытии инвентаря
    document.addEventListener('mousemove', handleMouseMove);

    // Удаляем слушатель события mousemove при закрытии инвентаря
    return () => {
      document.removeEventListener('mousemove', handleMouseMove);
    };
  }, [draggedItem, dragStartPos]);

  const handleDragEnter = (event: React.DragEvent<HTMLDivElement>) => {
    event.preventDefault();
    // Дополнительная логика при вхождении элемента
  };

  const handleDragLeave = (event: React.DragEvent<HTMLDivElement>) => {
    event.preventDefault();
  };

  const handleDragOver = (event: React.DragEvent<HTMLDivElement>) => {
    event.preventDefault();
    // Дополнительная логика при перемещении над элементом
  };

  const handleDrop = (event: React.DragEvent<HTMLDivElement>) => {
    event.preventDefault();

    if (draggedItem) {
      // Обработка события "падения" предмета
      // Отправить RPC-запрос на сервер для обновления данных инвентаря
    }
    handleDragEnd();
  };

  const handleDragStart = (event: React.DragEvent<HTMLLIElement>, item: { id: number; image: string }) => {
    console.log('handleDragStart: item', item);
    console.log('handleDragStart: x', event.clientX);
    console.log('handleDragStart: y', event.clientY);
    event.preventDefault();

    // Устанавливаем атрибут dataTransfer, чтобы предотвратить создание копии элемента
    event.dataTransfer.setData('text/plain', 'dummy');

    setDraggedItem(item);
    setDragStartPos({ x: event.clientX, y: event.clientY });
  };

  const handleDragEnd = () => {
    setDraggedItem(null);
    setDragStartPos(null);
 
    const draggingItem = document.querySelector('.inventory-item.dragging') as HTMLElement;
    if (draggingItem) {
      draggingItem.style.transform = 'translate(0, 0)';
      draggingItem.classList.remove('dragging');
    }
  };

  useEffect(() => {
    rpc.register('executeRpc:inventory', async (params: { playerId: number; inventoryData: any }) => {
      dispatch(openInventory(params));
    });

    rpc.register('executeRpc:closeinventory', async (params: { playerId: number; inventoryData: string }) => {
      dispatch(closeInventory());
    });
  }, [dispatch]);

  const inventoryContainerClass = `inventory-container ${isOpen ? 'inventory-open' : 'inventory-close'}`;

  return (
    <div
      className={inventoryContainerClass}
      onDragEnter={handleDragEnter}
      onDragLeave={handleDragLeave}
      onDragOver={handleDragOver}
      onDrop={handleDrop}
    >
      <h2>Инвентарь</h2>
      <ul className="inventory-list">
        {inventoryData &&
          inventoryData.map(({ id, image }) => (
            <li
              key={id}
              className="inventory-item inventory-data"
              draggable
              onDragStart={(event) => handleDragStart(event, { id, image })}
              onDragEnd={handleDragEnd}
            >
              {image}
            </li>
          ))}
      </ul>
    </div>
  );
};

export default Inventory;

styles.sass

.inventory-container
  position: fixed
  top: 50%
  left: 50%
  transform: translate(-50%, -50%)
  background-color: rgba(255, 255, 255, 0.2)
  padding: 20px
  border-radius: 10px
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.3)
  width: 600px
  height: 600px

  &.inventory-close
    display: none

  h2
    margin-bottom: 10px

  .inventory-list
    list-style-type: none
    padding: 0

  .inventory-item
    margin-bottom: 20px
    cursor: grab
    display: flex
    align-items: center
    border: 2px solid #ccc
    padding: 10px
    border-radius: 10px

    &:hover
      background-color: #f0f0f0

    &.dragging
      opacity: 0.5
      background-color: yellow
      cursor: grabbing

  .inventory-item img
    margin-right: 10px
    width: 45px
    height: 45px

  .inventory-data
    font-weight: bold
    width: 90px
    height: 90px

 

[Jerry (ChatGPT)]

Привет! Проблема с перетаскиванием предмета может быть связана с несколькими вещами. Во-первых, убедитесь, что ваш компонент Inventory правильно регистрирует обработчики событий перетаскивания, такие как onDragStart, onDragEnd и т.д. В коде, который вы предоставили, я вижу, что все обработчики событий перетаскивания правильно настроены.

Однако, проверьте, что ваше приложение настроено на поддержку событий перетаскивания. Убедитесь, что у вас есть draggable={true} для компонента li, который является перетаскиваемым элементом в вашем списке инвентаря. Также убедитесь, что события onDragStart и onDragEnd в вашем компоненте Inventory правильно обрабатываются и вызывается функция handleDragStart и handleDragEnd соответственно.

Если все вышеуказанное настроено правильно, то проблема, вероятно, может быть связана с пересечением элементов или неправильным стилями. Проверьте, что стили для перетаскиваемого элемента и контейнера инвентаря правильно настроены и не мешают перемещению элемента.

Если проблема не решена, попробуйте добавить отладочный вывод в консоль внутри функций handleDragStart и handleDragEnd, чтобы увидеть, вызываются ли эти функции вообще и правильно ли работают.

Надеюсь, эти подсказки помогут вам решить проблему с перетаскиванием предмета!

 

[Vermilion]

Обработчик handleDragStart вызывается.
Консоль логов:

handleDragStart: item Objectid: 1image: "1_0"[[Prototype]]: Object
index.tsx:66 handleDragStart: x 713
index.tsx:67 handleDragStart: y 324

 

[Vermilion]

Проблему нашел самостоятельно. Забыл добавить элементу класс dragging

const handleDragStart = (event: React.DragEvent<HTMLLIElement>, item: { id: number; image: string }) => {
    console.log('handleDragStart: item', item);
    console.log('handleDragStart: x', event.clientX);
    console.log('handleDragStart: y', event.clientY);
    //event.preventDefault();

    // Устанавливаем атрибут dataTransfer, чтобы предотвратить создание копии элемента
    event.dataTransfer.setData('text/plain', 'dummy');

    setDraggedItem(item);
    setDragStartPos({ x: event.clientX, y: event.clientY });
    event.currentTarget.classList.add('dragging'); // вот здесь
  };