我是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);
};
最佳答案
如果将要拖放到容器A中的对象缩放到与其目标容器相同的变换属性，将其悬停在目标容器上怎么办？ （在放下之前）
关于javascript - 在缩放的容器上拖放，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/60520159/