Drag and Drop on a scaled container

Question

I am new to React. I am working on a project, whose one of the features is dragging and dropping

The draggable components are supposed to be dragged and dropped on the container, say A.container , A also has the feature of zoom in and zoom out.

I have achieved this feature by changing its scale accordingly to achieve zoom in and zoom out. To achieve zoom in, I am multiplying the original scale which is 1 by 2. To achieve zoom out, I am dividing the current scale by 2.

The dropped component is dropped at the correct mouse position only when the scale is set to original. However, when the scale has some different value. The component dropped is displayed far away from the mouse position.

How do I achieve correct drops at all other scales.

Below is my code for the functionality.

Help would be appreciated

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);
};

Answer 1

What if the object that you are trying to drop in Container A is scaled to the same transform properties as its destination container once you hover it over the destination container? ( before you drop it )