在缩放的容器上拖放 [英] Drag and Drop on a scaled container

问题描述

我是React的新手。我正在做一个项目，其功能之一是拖放

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

应该将可拖动组件拖放到容器上，例如 A.container ，A还具有放大和缩小的功能。

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.

我已经通过相应地更改其比例以实现放大和缩小来实现此功能。为了实现放大，我将原始比例1乘以2。为了实现缩小，我将当前比例除以2。

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.

如何在所有其他比例下实现正确的放置。

下面是我的功能代码。

Below is my code for the functionality.

我们将不胜感激

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悬停在目标容器上后，它会缩放到与其目标容器相同的变换属性吗？ （在删除它之前）

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)

这篇关于在缩放的容器上拖放的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！