функциональное смещение области перетаскивания от элемента html со слушателями - PullRequest
Новая
       12

функциональное смещение области перетаскивания от элемента html со слушателями

0 голосов
/ 31 октября 2019

У меня есть функциональный компонент React, который должен возвращать div, который принимает пропущенные ссылки или файлы, а затем оповещает об указанном URL или пути к файлу. Когда он отрисовывается сам по себе (только в App.js), он работает, и область перетаскивания правильно расположена над div.

В моем приложении я отображаю его в меню, которое анимируется в виде простых ключевых кадров CSS и располагается перед другим html (который, я думаю, может вызывать некоторые проблемы), и после тестированияобласть перетаскивания смещена вниз и вправо, изменяя количество в зависимости от того, насколько большим или маленьким я делаю div. Любые идеи, что может быть причиной смещения области перетаскивания от div, который имеет EventListeners?

Попытка сделать div 100vh и 100vw, и область перетаскивания охватила весь экран, и он правильно вернул значения, которые я ввел

Мой компонент реагирования: 

class DropArea extends Component {
  noPropHandler = e => {
    e.stopPropagation();
    e.preventDefault();
  };

  drop = e => {
    e.stopPropagation();
    e.preventDefault();
    console.log(e);
    const imageUrl = e.dataTransfer.getData("URL");
    alert(imageUrl);
  };
  render() {
    return (
      <div
        className="dropzone"
        onDragEnter={e => this.noPropHandler(e)}
        onDragExit={e => this.noPropHandler(e)}
        onDragOver={e => this.noPropHandler(e)}
        onDrop={e => this.drop(e)}
      >
        DropZone => you could drop any image from any page here
      </div>
    );
  }
}

export default DropArea;

Мой компонент NewItem, в котором он отображается: 

function NewItem(props) {
  return (
    <section className={props.name}>
      <div>
        <span>Item: </span>
        <input name="name" />
      </div>
      <div>
        <span>Price: </span>
        <input name="price" type="number" />
      </div>
      <div>
        <span>Notes: </span>
        <input name="notes" type="textbox" />
      </div>
      <div id="dropbox">
        <DropArea />
      </div>
      <div>
        <span>Link: </span>
        <input name="link" />
      </div>
    </section>
  );
}

ожидание предупреждения с URL-адресом изображения или ссылкой, перетаскиваемой в область, но мне нужно навести курсор мыши, чтобы найти изменение курсора, указывающееправильная область

...