项目中使用到了Antd的Tree组件。节点拖拽效果里面,拖拽目标为<input/>时,也会产生整个结点的拖拽效果,导致文本框内内容无法被鼠标选中。此处如何让子元素的拖拽不触发父元素的拖拽效果呢?
具体现象如下:
关键部分相关代码如下:
<Tree
showIcon
draggable
blockNode
multiple={false}
onDrop={this.onDrop.bind(this)}
onSelect={this.handleMenuClick.bind(this)}
>
{
data.map((item,index) =>{
return <TreeNode
key={index}
data-item={item}
data-index={index}
title={
<div className="tree-content">
{
item.editable
?
<Input
autoFocus
onBlur={this.reqChangeName.bind(this, item, index)}
onChange={this.changeGroupName.bind(this, item, index)}
onClick={(e) => {e.stopPropagation()}}
value={item.documentName}
/>
:
<div
className="content-name"
onDoubleClick={this.handleDblClick.bind(this, item, index)}
>
{item.documentName}
</div>
}
</div>
</TreeNode>
})
}
</Tree>
问题更新:
当文本框内内容超出文本框能显示的长度时,即可正常通过鼠标选中文本,有无方法利用此性质解决此处拖拽问题?文本框内容超出效果如下:
问题更新:
阻止文本框onMouseMove
事件的默认行为,可以实现文本框内鼠标拖选事件不触发父元素的拖拽效果,但是文本框内容依旧无法被拖选中,效果如下:
<Input
autoFocus
onMouseMove={(e) => {e.preventDefault()}}
onBlur={this.reqChangeName.bind(this, item, index)}
onChange={this.changeGroupName.bind(this, item, index)}
onClick={(e) => {e.stopPropagation()}}
value={item.documentName}
/>
与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…