Javascript 在缩放的容器上拖放

我是新来的。我正在做一个项目，它的一个特点就是拖放

可以拖动的组件应该被拖放到容器上，比如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);
};

---

如果将要放置在容器A中的对象悬停在目标容器上后，将其缩放为与其目标容器相同的变换特性，该怎么办？在你放下它之前

我试着将组件的比例设置为放下时容器的比例。但是它不起作用。只是它的尺寸变了。嗯，没问题。如果可以将项目放置在缩放容器中的任意位置，而不限于网格，则另一种方法是在悬停容器时使用鼠标坐标，然后在放置时使用这些坐标将对象放置在缩放容器中。我没有创建这个CodeSandbox，但这里有一个react中的鼠标坐标示例：也许您想探索react dnd。我不确定缩放是否能满足您的期望，除非您将缩放到宽度和高度。此外，您的代码使用本机api，如e.target.style、getElementById，这不是使用react的方式。