Javascript 当鼠标悬停在可拖动的父对象上时，如何使文本选择在子对象中可见？

我有一个盒子，可以拖动，在这个盒子里我有另一个盒子，里面有文本。我希望能够选择文本，但也能够拖放父对象。我的问题是，我如何显示选择，当离开文本框？现在，当鼠标退出时，选择突出显示消失，当鼠标再次结束时，选择突出显示再次出现。这是密码。选择一个文本并保留绿色方框

constinnerbox=document.getElementById（'inner'）；
const outerBox=document.getElementById（'outer'）；
innerBox.addEventListener（'mouseover'，（）=>{
setAttribute（'draggable'，false）；
});
innerBox.addEventListener（'mouseout'，（）=>{
setAttribute（'draggable'，true）；
});
*{
框大小：边框框；
}
#外{
填充：1rem；
宽度：10雷姆；
高度：10雷姆；
背景色：红色；
}
#内在的{
宽度：100%；
身高：100%；
背景颜色：绿色；
}

选择我！
尝试将用户选择：自动添加到内部框中


constinnerbox=document.getElementById（'inner'）；
const outerBox=document.getElementById（'outer'）；
innerBox.addEventListener（'mouseover'，（）=>{
setAttribute（'draggable'，false）；
});
innerBox.addEventListener（'mouseout'，（）=>{
setAttribute（'draggable'，true）；
});
*{
框大小：边框框；
}
#外{
填充：1rem；
宽度：10雷姆；
高度：10雷姆；
背景色：红色；
}
#内在的{
宽度：100%；
身高：100%；
背景颜色：绿色；
用户选择：自动
}

选择我！
我会将此标记为答案，因为它正在处理我的测试代码。不幸的是，我无法让它在真实的代码上工作：（我需要在React中使用它，无论我做什么，当光标离开该区域时，选择就会消失，当光标返回时，选择就会再次出现。我必须深入研究它。