Я новый React. Я работаю над проектом, который имеет такие функции, как: перетаскивание, падение, прокрутка, увеличение, уменьшение. Перетаскиваемые компоненты перетаскиваются из его контейнера, скажем containerA , и помещаются в другой контейнер, скажем containerB . Контейнер A имеет функцию увеличения и уменьшения масштаба. Я реализовал увеличение и уменьшение масштаба путем соответствующего изменения значения масштаба контейнера.
При добавлении компонента в контейнер с более высоким значением масштаба масштаб компонента автоматически устанавливается относительно масштаба контейнера.
Но проблема в следующем: При перетаскивании этого компонента со шкалой относительно масштаба контейнера он возвращается к своему оригинальный размер и находится вне курсора. Как получить компонент, прикрепленный к курсору и относительно масштаба контейнера при перетаскивании Справка будет принята
zoomState(e) {
switch (e.deltaY > 0) {
case true:
if(out==0)
{
if(this.state.scale>2.5)
{
this.zoomOut(e);
}
}
else{
}
break;
default:
this.zoomIn(e);
}
}
zoomIn = (e) => {
this.setState({ scale: this.state.scale * 2});
console.log("zoomin" + ""+ this.state.scale)
e.target.style.transform = `scale(${this.state.scale})`
out=0
}
zoomOut = (e) => {
this.setState({ scale: this.state.scale / 2});
e.target.style.transform = `scale(${this.state.scale})`
console.log("zoomout" + ""+ this.state.scale)
if(this.state.scale==1)
{
e.target.style.transform=null
}
}
dragStart(event) {
event.dataTransfer.setData("Text", event.target.id);
var dragtarget1=document.getElementById("dragtarget1")
var dragtarget2=document.getElementById("dragtarget2")
if(event.target.id=="dragtarget1")
{
setTimeout(function(){
dragtarget1.classList.add('hide');
});
}
if(event.target.id=="dragtarget2")
{
setTimeout(function(){
dragtarget2.classList.add('hide');
});
}
console.log(dragtarget1.style)
}
allowDrop(event) {
event.preventDefault();
}
drop=(event)=> {
event.preventDefault();
var data = document.getElementById(event.dataTransfer.getData("Text"));
event.target.appendChild(data);
data.style.position = "fixed";
if(this.state.scale>1){
data.style.left = (event.nativeEvent.offsetX - data.clientWidth / 2) + "px";
data.style.top = (event.nativeEvent.offsetY - data.clientHeight / 2) + "px";
}
else{
data.style.left = (event.clientX - data.clientWidth / 2) + "px";
data.style.top = (event.clientY - data.clientHeight / 2) + "px";
}
var dragtarget1=document.getElementById("dragtarget1")
setTimeout(function(){
dragtarget1.classList.remove('hide');
});
var dragtarget2=document.getElementById("dragtarget2")
setTimeout(function(){
dragtarget2.classList.remove('hide');
});
console.log(dragtarget1.style)
}
cood(){
var bg=document.getElementById("bg")
bg.style.transform=null
}
onMouseMove(e)
{
xcood=e.nativeEvent.offsetX
ycood= e.nativeEvent.offsetY
console.log(xcood,ycood)
}
render() {
return (
<div id="base" >
<div className="first" id="first">
</div>
<div className="second">
<div className="container">
<div id="bg" ref="bg"
onWheel={(e)=>this.zoomState(e)}
className="bg-image-wrapper"
style={{ 'transform': `scale(${this.state.scale})`}}
onDrop={(e)=>this.drop(e)} onDragOver={(e)=>this.allowDrop(e)}
//onMouseMove={(e)=>this.onMouseMove(e)}
>
</div>
</div>
<div className="comp">
<div className="droptarget1">
<div
style={{
height:25,
width:25,
backgroundColor:"red",
position:"fixed",
display:"inline"
}}
onDragStart={(e)=>this.dragStart(e)} draggable="true" id="dragtarget1">
</div>
</div>
<div className="droptarget2">
<div
style={{
height:25,
width:25,
backgroundColor:"blue",
position:"fixed",
display:"inline"
}}
onDragStart={(e)=>this.dragStart(e)} draggable="true" id="dragtarget2">
</div>
</div>
</div>
</div>
<div className="third">
</div>
</div>
);
}