Нужно предложение относительно drag-drop Grid, Мы хотим, чтобы поведение было таким же, как: https://grapesjs.com/demo.html - PullRequest
Новая
       19

Нужно предложение относительно drag-drop Grid, Мы хотим, чтобы поведение было таким же, как: https://grapesjs.com/demo.html

0 голосов
/ 16 января 2020

Мы реализовали перетаскивание с использованием response-dnd, оно работает нормально. Проблема в том, что когда мы хотим получить положение элемента при перетаскивании, чтобы проверить, не опустился ли он выше или ниже. В настоящее время я получаю положение следующим образом. :

При наведении курсора я получаю позицию y внутри useDrop Код Hook.MY: 

const [{ isOver, canDrop }, drop] = useDrop({
  accept: getAcceptType(schema),
  drop: addComponentOnDrop(schema),
  collect: monitor => ({
    isOver: monitor.isOver({ shallow: true }),
    canDrop: monitor.canDrop(),
  }),
  hover(props, monitor) {
    if (!monitor.canDrop()) {
      return;
    }
    const { y } = monitor.getClientOffset();
    sety(y);
  },
});

Используя значение yi, проверяю, находится ли элемент зависания выше или ниже dropTarget.My Code is: 

function mouseOver(event) {
  const { target } = event;
  const { top, height } = target.getBoundingClientRect();
  if (y < top + height / 2) {
    sethover("above");
  } else {
    sethover("below");
  }
}

Состояние, которое я здесь устанавливаю, используется для обновления контекста api.setHover () является частью контекста api.Context api используется в моем компоненте контейнера, где я написал свой метод ( addComponentOnDrop) для добавления компонента в мою коллекцию схем / массивов.

Это работает, но не так эффективно. Кроме того, обновление API-интерфейса состояния / контекста для отображения стиля onHover выше / ниже выполняется настолько быстро, что обновление состояния происходит слишком часто и отображаются сбои. Пожалуйста, предложите какой-нибудь эффективный способ достижения этого.

...