如何在子项中显示文本选择，而将鼠标悬停在可拖动的父项上？

Question

我有一个可拖动的盒子，在这个盒子里面我有另一个盒子，里面有文字。我希望能够选择文本，但也可以拖放父级。我遇到的问题是，在离开带有文字的方框时，如何显示选择？现在，当鼠标移出时，选择高亮显示消失，当鼠标再次显示时，再次出现。这是代码。选择文字并留下绿色方块。

const innerBox = document.getElementById('inner');
const outerBox = document.getElementById('outer');

innerBox.addEventListener('mouseover', () => {
	outerBox.setAttribute('draggable', false);
});

innerBox.addEventListener('mouseout', () => {
	outerBox.setAttribute('draggable', true);
});

* {
  box-sizing: border-box;
}

#outer {
  padding: 1rem;
  width: 10rem;
  height: 10rem;
  background-color: red;
}

#inner {
  width: 100%;
  height: 100%;
  background-color: green;
}

<div id="outer" draggable="true">
  <div id="inner">Select me!</div>
</div>

Answer 1

尝试将user-select：auto添加到内框！

const innerBox = document.getElementById('inner');
const outerBox = document.getElementById('outer');

innerBox.addEventListener('mouseover', () => {
	outerBox.setAttribute('draggable', false);
});

innerBox.addEventListener('mouseout', () => {
	outerBox.setAttribute('draggable', true);
});

* {
  box-sizing: border-box;
}

#outer {
  padding: 1rem;
  width: 10rem;
  height: 10rem;
  background-color: red;
}

#inner {
  width: 100%;
  height: 100%;
  background-color: green;
  user-select:auto
}

<div id="outer" draggable="true">
  <div id="inner">Select me!</div>
</div>