Drag and drop в react

Question

Есть следующий код в js, который передвигает картинку мяча(взят с сайта https://learn.javascript.ru/drag-and-drop):

var ball = document.getElementById('ball');

ball.onmousedown = function(e) { // 1. отследить нажатие

  // подготовить к перемещению
  // 2. разместить на том же месте, но в абсолютных координатах
  ball.style.position = 'absolute';
  moveAt(e);
  // переместим в body, чтобы мяч был точно не внутри position:relative
  document.body.appendChild(ball);

  ball.style.zIndex = 1000; // показывать мяч над другими элементами

  // передвинуть мяч под координаты курсора
  // и сдвинуть на половину ширины/высоты для центрирования
  function moveAt(e) {
    ball.style.left = e.pageX - ball.offsetWidth / 2 + 'px';
    ball.style.top = e.pageY - ball.offsetHeight / 2 + 'px';
  }

  // 3, перемещать по экрану
  document.onmousemove = function(e) {
    moveAt(e);
  }

  // 4. отследить окончание переноса
  ball.onmouseup = function() {
    document.onmousemove = null;
    ball.onmouseup = null;
  }
  // 5. Чтоб не обрабатывался как картинка браузером
  ball.ondragstart = function() {
    return false;
  };
}

Этот код надо реализовать на react, но при создании onDragStart в реакте картинка все равно воспринимается браузером как картинка.

onDragStart(e){
    return false;
}

Вопрос в том как это исправить.

Сайт с кодом, который надо перенести: https://learn.javascript.ru/drag-and-drop

Answer 1

Вот-с ваш код в реакте:

    import React, {useRef} from 'react'

    const DragAndDrop = () => {

    const ballRef = useRef(null)

    const handleDown = (e) => {
        ballRef.current.style.position = 'absolute';
        moveAt(e);
        // переместим в body, чтобы мяч был точно не внутри position:relative
        document.body.appendChild(ballRef.current);

        ballRef.current.style.zIndex = 1000; // показывать мяч над другими элементами

        // передвинуть мяч под координаты курсора
        // и сдвинуть на половину ширины/высоты для центрирования
        function moveAt(e) {
            ballRef.current.style.left = e.pageX - ballRef.current.offsetWidth / 2 + 'px';
            ballRef.current.style.top = e.pageY - ballRef.current.offsetHeight / 2 + 'px';
        }

        // 3, перемещать по экрану
        document.onmousemove = function(e) {
            moveAt(e);
        }

        // 4. отследить окончание переноса
        ballRef.current.onmouseup = function() {
            document.onmousemove = null;
            ballRef.current.onmouseup = null;
        }
        // 5. Чтоб не обрабатывался как картинка браузером
        ballRef.current.ondragstart = function() {
            return false;
        };
    }

    return (
        <img ref={ballRef}
             onMouseDown={handleDown}
             src={require('./ball.jpg')} alt="" width={50} height={50}/>
    )
}

БЛОГ НА HUSL

Drag and drop в react

Ответы (1 шт):