当前位置: 首页 > news >正文

react-dnd 拖拽事件与输入框的文本选中冲突

问题描述

当我们使用拖拽库的时候,往往会遇到拖拽的一个元素他的子孙元素有输入框类型的dom节点,当拖拽的事件绑定在该元素身上时候,发现子孙的输入框不能进行文本选中了,会按住鼠标去选中文本的时候会触发拖拽

实际的效果,鼠标无法选中文本输入框中的值
在这里插入图片描述

解决1:拖拽事件绑定到子孙元素

不再将绑定事件绑到整个dom,使用拖拽句柄,在拖拽库中一般都有句柄的选项,可以把拖拽的事件绑定子孙的某个节点上,一般拖拽可以绑定 className='handle' 的节点去
每个库都有自己的写法,搜索一下即可
下面以react-draggable库为例子


import Draggable from 'react-draggable';function Component() {return (<Draggable handle=".handle"><div><div className="handle"> Drag </div><div> Content ...</div></div></Draggable>);
}

解决2:保持拖拽绑定,处理事件冲突

原理是在拖拽的事件中,判断当前触发拖拽事件的节点是否是 input框,如果是就阻止拖拽事件,自然就可以就行选择文本的操作了,
下面以reac-dnd库为例:
useDrag方法中canDrag方法中可以进行判断,返回一个false就可以阻止拖动,核心的判断是使用document.activeElement.tagName获取当前的激活事件的Dom节点的相关信息进行判断,相关的知识可以百度一下

//下面只展示核心部分
import { DndProvider, useDrag, useDrop } from 'react-dnd';const DragDom= () => {const [{ isDragging }, drag] = useDrag(() => ({type: 'aaa',canDrag: (m) => {if(document.activeElement.tagName === 'INPUT') return falsereturn true},collect: (monitor) => ({isDragging: monitor.isDragging(),}),}));return (<div ref={drag}> Drag </div>);
};

最后大功告成
在这里插入图片描述

2024.12.23 更新

	if(document.activeElement.tagName === 'INPUT') return false

// 这个判断改造了 改为下面的数组形式

 	if(['INPUT', 'TEXTAREA'].some(i => i===document.activeElement.tagName)) return false

http://www.mrgr.cn/news/80011.html

相关文章:

  • Opencv之图像添加水印
  • HCIA-Access V2.5_2_2网络通信基础_TCP/IP协议栈报文封装
  • SAP FICO物料分类账
  • 任务4 DNS服务配置与管理
  • ubuntu22.04 使用crash
  • SpringBoot 手动实现动态切换数据源 DynamicSource (中)
  • 【大前端vue:组件】鼠标上移 出现动画
  • pyfink1.20版本下实现消费kafka中数据并实时计算
  • 【架构】从 Socket 的角度认识非阻塞模型
  • xshell连接虚拟机,更换网络模式:NAT->桥接模式
  • 网络基础 - TCP/IP 五层模型
  • 爬虫基础知识点
  • 设计模式——Singleton(单例)设计模式
  • 12.12 深度学习-注意力机制
  • Java从入门到工作3 - 框架/工具
  • 如何在项目中使用人大金仓替换mysql
  • 单目深度估计模型 lite-mono 测试
  • 如何使用程序查询域名whois信息?(带PHP/C#示例)
  • all/any函数可以对“条件”打包(Python)
  • 解决VSCode无法识别相对路径的问题