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>
);
}
解决方案
推荐阅读
- javascript - Firebase云功能:从文档创建中执行查询,然后删除除新创建的结果之外的结果
- python - TypeError:迭代 0-d 张量
- spring - SessionCreationPolicy.STATELESS 时显示 spring 安全认证对象
- flutter - 等效于 Riverpod 中的 ChangeNotifierProvider 小部件
- mysql - 字符串部分搜索
- gnuplot - Inkscape 裁剪使用 gnuplot 生成的 eps 文件
- nix - Nix:将其他派生的子目录添加到 PATH
- c - 是否存在可移植的 pthread_sleep() 函数?
- r - 如何执行模拟以在 R 中找到具有给定概率的 z 分数 (x)
- angular - 如何在 Angular/RxJS 中合并两个 observable?