Javascript 为什么我的div可以在较小的屏幕上拖动，但当我在较大的屏幕上检查它时，我'；我再也不能拖了？

此外，当我在更大的屏幕上检查div时，div的位置也会发生变化。如果我检查它在大屏幕上的外观，div的位置会完全改变

jsfiddle：

要查看全屏：

代码：

类拖动扩展React.Component{
建造师（道具）{
超级（道具）；
此.state={
x:这个，道具，x，
y:这个，道具，y，
showmoreoptions弹出窗口：false，
showHelpModal:错误
};
this.reff=React.createRef（）；
this.dragMouseDown=this.dragMouseDown.bind（this）；
this.elementDrag=this.elementDrag.bind（this）；
this.closeDragElement=this.closeDragElement.bind（this）；
this.showmoreoptionspoop=this.showmoreoptionspoop.bind（this）；
}
componentDidMount（）{
这1.pos1=0；
这个.pos2=0；
这1.pos3=0；
这1.4=0；
}
下拉式（e）{
e、 预防默认值（）；
this.pos3=e.clientX；
this.pos4=e.clientY；
document.onmouseup=this.closeDragElement；
document.onmousemove=this.element拖动；
};
元素拖动（e）{
e、 预防默认值（）；
this.pos1=this.pos3-e.clientX；
this.pos2=this.pos4-e.clientY；
this.pos3=e.clientX；
this.pos4=e.clientY；
这是我的国家({
y:this.reff.current.offsetTop-this.pos2+“px”，
x:this.reff.current.offsetLeft-this.pos1+“px”
});
};
closeDragElement（）{
document.onmouseup=null；
document.onmousemove=null；
};
showmoreoptions弹出窗口（）{
这是我的国家({
ShowMoreOptions弹出窗口：！this.state.ShowMoreOptions弹出窗口
});
};
render（）{
返回(
菜单

);
}
}

用

左：95rem，上：39rem定位div

。在较小的屏幕上，这会将元素移出视口。试着用一个百分比来代替

如所述改变定位

对于以下问题：

当我在大屏幕上查看它时，它仍然不能解决我无法拖动它的问题

---

您可能已经在chrome开发工具中启用了触摸功能。我禁用了我这边的触控，你的代码运行得很好。要了解如何在开发工具中关闭触摸，请至少在小提琴中参考，将初始位置设置为

position: fixed;
left: 95rem;
top: 39rem;

这会导致固定位置（可能在小屏幕上看不见）

拖放此项时，您正在更新这些值

在“调整页面大小”中，值在距离左侧和距离顶部方面保持不变。（rem与视口/屏幕宽度或高度无关）

关于其他定位问题： 如果你能说出你想要的行为是什么，那么你可能会更接近你想要的。您可以尝试设置并更新

右侧

，而不是左侧，如下所示

拖放工作，但仅适用于鼠标事件，因为onmousedown不处理触摸事件

仅供参考：onmousedown在触摸屏设备上的等效功能是ontouchstart， 而onmouseup的等价物是ontouchend。资料来源：

也许您在具有触摸事件的设备检查器中？ 您是否遵循@moosa saadat的建议，禁止检查员内的触摸

您可能已经在chrome开发工具中启用了触摸功能。我禁用了我这边的触控，你的代码运行得很好。要了解如何在开发工具中关闭touch，请参考此问题

别忘了检查浏览器兼容性！

---

（这就是为什么会有这样的事情）

无法复制，我遇到的唯一问题是，在我删除

left:95rem之前，我在屏幕上看不到任何东西；顶部：39rem

@ZohirSalak你有没有用这个链接全屏查看它？是的，我有，我没有尝试作为一个移动设备，问题是react没有识别出

onMouseDown

事件，因此它不会在移动设备上触发事件谢谢，这几乎解决了我在不同屏幕大小上的定位问题，但它仍然不能解决我在大屏幕上查看时无法拖动的问题。我不确定问题出在哪里。如何关闭移动设备上的触摸屏？@ZohirSalak问题是关于大屏幕，而不是手机。而且，此代码仅适用于鼠标事件。因此，如果需要触摸兼容性，那么也需要处理触摸事件。

position: fixed;
left: 95rem;
top: 39rem;