Css 将可拖动元素拖出缩放容器上的光标

我是新来的React。我正在从事一个项目，该项目具有如下功能：拖放、滚动、放大、缩小。 可拖动组件从其容器（如containerA中拖动，并放入另一个容器（如containerB）中。ContainerA具有放大和缩小功能。我通过相应地更改容器的比例值来实现放大和缩小

将零部件放置到具有较高比例值的容器上时，零部件的比例将自动相对于容器的比例进行设置

但问题是：当拖动此组件时，该组件的比例相对于容器的比例，它将恢复到其原始大小，并且超出光标范围。如何在拖动时实现附着到光标且相对于容器比例的组件 我们将不胜感激

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

zoomState（e）{
开关（e.deltaY>0）{
大小写正确：
如果（out==0）
{
如果（此状态比例>2.5）
{
这是zoomOut（e）；
}
}
否则{
}
打破
违约：
这是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.dataTransfer.setData（“Text”，event.target.id）；
var dragtarget1=document.getElementById（“dragtarget1”）
var dragtarget2=document.getElementById（“dragtarget2”）
if（event.target.id==“dragtarget1”）
{
setTimeout（函数（）{
dragtarget1.classList.add（'hide'）；
});
}
if（event.target.id==“dragtarget2”）
{
setTimeout（函数（）{
dragtarget2.classList.add（'hide'）；
});
}
console.log（dragtarget1.style）
}
allowDrop（事件）{
event.preventDefault（）；
}
下降=（事件）=>{
event.preventDefault（）；
var data=document.getElementById（event.dataTransfer.getData（“Text”）；
event.target.appendChild（数据）；
data.style.position=“固定”；
如果（此状态比例>1）{
data.style.left=（event.nativeEvent.offsetX-data.clientWidth/2）+“px”；
data.style.top=（event.nativeEvent.offsetY-data.clientHeight/2）+“px”；
}
否则{
data.style.left=（event.clientX-data.clientWidth/2）+“px”；
data.style.top=（event.clientY-data.clientHeight/2）+“px”；
}
var dragtarget1=document.getElementById（“dragtarget1”）
setTimeout（函数（）{
dragtarget1.classList.remove（'hide'）；
});
var dragtarget2=document.getElementById（“dragtarget2”）
setTimeout（函数（）{
dragtarget2.classList.remove（'hide'）；
});
console.log（dragtarget1.style）
}
库德（）{
var bg=document.getElementById（“bg”）
bg.style.transform=null
}
onMouseMove（e）
{
xcood=e.nativeEvent.offsetX
ycood=e.nativeEvent.offsetY
console.log（xcood，ycood）
}
render（）{
返回(
this.zoomState（e）}
className=“bg图像包装器”
style={'transform'：`scale（${this.state.scale}）`}
onDrop={（e）=>this.drop（e）}onDragOver={（e）=>this.allowDrop（e）}
//onMouseMove={（e）=>this.onMouseMove（e）}
>
this.dragStart（e）}draggable=“true”id=“dragtarget1”>
this.dragStart（e）}draggable=“true”id=“dragtarget2”>
);
}

您能提供一些您尝试过的代码片段吗？@AdamHinckley上面编辑的版本有必要的代码snippet@AdamHinckley也就是说，如果您可以提供一些fiddle或sandbox示例，这将非常有助于解决问题。。。请费心阅读@AdamHinckley我能不能用getElementById实现它