如何解决使用React手动水平调整<div>元素的大小
我正在尝试水平调整div标签的大小,但是我想实现与resize css property
相同的效果。
我实现的目标:当我们单击鼠标时,它开始调整大小,当我再次在div区域内单击时,它停止调整大小。
我想在此链接中实现给定(解决方案),但要水平。 https://stackoverflow.com/a/55565128/4063956 我从此链接获得帮助。
如何在React中实现这一目标?
<div className="flex flex-row h-full w-screen z-20">
<div ref={ref} style={divStyle} className="resize-x overflow-auto h-full max-w-full lg:max-w-6xl xl:max-w-6xl md:max-w-3xl sm:min-w-0 md:min-w-100">
</div>
<div onMouseDown={handler} className="bg-white cursor-move w-3 border "/>
<div className="flex-1 overflow-hidden">
</div>
</div>
const handler = useCallback(() => {
function onMouseDrag(e) {
setSize(size => ({
x: e.x + ref.current.offsetWidth / 2,y: e.y + ref.current.offsetHeight / 2,}));
}
function onMouseUp() {
ref.current.removeEventListener("mousemove",onMouseDrag);
ref.current.removeEventListener("mouseup",onMouseUp);
}
ref.current.addEventListener("mousemove",onMouseDrag);
ref.current.addEventListener("mouseup",onMouseUp);
},[]);
const divStyle = {
width: size.x,};
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。