主页 / 问题 / 1106278
Accepted
Evgeney Lebedev
Asked:2020-04-06 18:20:33 +0000 UTC2020-04-06 18:20:33 +0000 UTC

拖放反应

  • 772

有以下 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中实现，但是在react中创建onDragStart时，图片仍然被浏览器感知为图片。

在此处输入图像描述

onDragStart(e){
    return false;
}

问题是如何解决它。

带有要传输的代码的站点： https ://learn.javascript.ru/drag-and-drop

javascript

1 个回答

  1. Best Answer

    这是您的反应代码：

        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}/>
    )
}
    • 1

相关问题