Перетащите на масштабированный контейнер - PullRequest
Новая
       8

Перетащите на масштабированный контейнер

0 голосов
/ 04 марта 2020

Я новичок в React. Я работаю над проектом, одной из функций которого является перетаскивание

Перетаскиваемые компоненты должны перетаскиваться на контейнер, например, A.container, A также имеет функцию увеличения и уменьшить.

Эту функцию я достиг, изменив ее масштаб соответствующим образом для увеличения и уменьшения масштаба. Чтобы добиться увеличения, я умножаю исходный масштаб на 1 на 2. Чтобы добиться уменьшения, я делю текущий масштаб на 2.

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

Как добиться правильного отбрасывания во всех других масштабах.

Ниже приведен мой код для функциональность.

Помощь будет оценена 

zoomIn = e => {
  if (this.state.scale == null) {
    this.setState({ scale: 1 });
  }
  this.setState({ scale: this.state.scale * 2 });
  console.log(this.state.scale);
  e.target.style.transform = `scale(${this.state.scale})`;
  e.target.style.transformOrigin = "-0% -0%";
  console.log(this.state.scale);
  out = 0;
  console.log(e.target.style.transform);
  console.log(e.clientX);
  var dragtarget1 = document.getElementById("dragtarget1");
  console.log(dragtarget1.style.left);
  console.log(e.target.getBoundingClientRect().offsetX);
};
zoomOut = e => {
  this.setState({ scale: this.state.scale / 2 });
  console.log(this.state.scale);
  if (this.state.scale === 2.5) {
    e.target.style.transform = `scale(${(this.state.scale = null)})`;
    out = 1;
    this.cood();
  } else {
    out = 0;
  }
  console.log(this.state.scale);
  e.target.style.transform = `scale(${this.state.scale})`;
  e.target.style.transformOrigin = "-0%,-0%";
};
drop = event => {
  event.preventDefault();
  var data = document.getElementById(event.dataTransfer.getData("Text"));
  event.target.appendChild(data);
  data.style.position = "fixed";
  data.style.left = (event.clientX - data.clientWidth / 2) / 2 + "px";
  data.style.top = (event.clientY - data.clientHeight / 2) / 2 + "px";

  //console.log(event.target.getBoundingClientRect())
  console.log(event);
  var dragtarget1 = document.getElementById("dragtarget1");
  setTimeout(function() {
    dragtarget1.classList.remove("hide");
  });
  var dragtarget2 = document.getElementById("dragtarget2");
  setTimeout(function() {
    dragtarget2.classList.remove("hide");
  });
  console.log(data.style.left);
};

1 Ответ

1 голос
/ 04 марта 2020

Что если объект, который вы пытаетесь отбросить в контейнере А, масштабируется до тех же свойств преобразования, что и его целевой контейнер, когда вы наводите его на целевой контейнер? ( перед тем как бросить )

...