郑州网站个人开发,北京城乡建设部网站首页北京,wordpress图片cdn,网页设计与制作需求书问题描述
当我们使用拖拽库的时候#xff0c;往往会遇到拖拽的一个元素他的子孙元素有输入框类型的dom节点#xff0c;当拖拽的事件绑定在该元素身上时候#xff0c;发现子孙的输入框不能进行文本选中了#xff0c;会按住鼠标去选中文本的时候会触发拖拽
实际的效果…问题描述
当我们使用拖拽库的时候往往会遇到拖拽的一个元素他的子孙元素有输入框类型的dom节点当拖拽的事件绑定在该元素身上时候发现子孙的输入框不能进行文本选中了会按住鼠标去选中文本的时候会触发拖拽
实际的效果鼠标无法选中文本输入框中的值
解决1拖拽事件绑定到子孙元素
不再将绑定事件绑到整个dom使用拖拽句柄在拖拽库中一般都有句柄的选项可以把拖拽的事件绑定子孙的某个节点上一般拖拽可以绑定 classNamehandle 的节点去 每个库都有自己的写法搜索一下即可 下面以react-draggable库为例子 import Draggable from react-draggable;function Component() {return (Draggable handle.handledivdiv classNamehandle Drag /divdiv 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 idocument.activeElement.tagName)) return false引申思考 我们可以把不需要拖拽的元素写入某个特定的类名, 这不管元素如何布局都可以控制不拖动 下面是用于判断拖拽的伪代码
divdiv 元素1divdiv class不允许拖拽类名不可以动元素2divdiv 元素3div
/divuseDrag(() ({canDrag: () {if(document.activeElement的类名 不允许拖拽类名) return falsereturn true}
}))
