解决拖拽时,如果元素内有input,无法选中文本的问题
# 问题
拖拽元素内有input,无法选中input内的文本
原因:拖拽属性和鼠标长按选中有冲突
# 解决方案
给input设置事件。如果鼠标按下 就取消父元素拖拽属性,input失去焦点时重新设置
// 给元素事件 鼠标按下 mousedown 失去焦点 blur 绑定事件 disableDrag setbleDrag
<a-input @mousedown="disableDrag" @blur="setbleDrag" style="width: 80%;" placeholder="" v-model="record.merchandiseUrlOrder"/>
1
2
3
2
3
// 当在input中鼠标按下时,取消父元素的draggable属性
disableDrag(event) {
var ev = event || window.event
// 这里的parentNode层级 根据input所在的层级而定
ev.target.parentNode.parentNode.parentNode.draggable = false
},
// 当鼠标离开input时,打开父元素的draggable属性
setbleDrag(event) {
var ev = event || window.event
// 这里的parentNode层级 根据input所在的层级而定
ev.target.parentNode.parentNode.parentNode.draggable = true
},
1
2
3
4
5
6
7
8
9
10
11
12
2
3
4
5
6
7
8
9
10
11
12
编辑 (opens new window)
上次更新: 2024/02/29, 15:10:43