sometimes the text on the page is selected by mouse box , keyboard and other operations, resulting in a drag-and-drop mechanism that triggers the mouse, which is very bad for web experience, as shown in figure

the text and pictures in the picture are easily selected by the mouse or hand-cheap, and then drag the mouse again, the scene is very embarrassing.
how to solve this problem gracefully?

I have tried to listen to the selection and drag events of body on the page, and the effect is very obvious, directly blocking all selections and drags except the input / text box, as shown below. However, there is a flaw: the text on the part of the dom (non-text / input box) wants to retain the function selected by the box , which is obviously too effective and not suitable.

document.body.onselectstart = document.body.ondrag = ()=>{ return false }

try to block it through CSS, the code is as follows. The effect is the same as that of the above scheme, and the defects are the same

body{
  -webkit-touch-callout: none;  
  -webkit-user-select: none;  
  -khtml-user-select: none;  
  -moz-user-select: none;  
  -ms-user-select: none;  
  user-select: none;
}

then narrows down the scope, but finds that as long as the text can be selected, the mouse can trigger the drag-and-drop mechanism, and it is not effective to disable body alone.

document.body.ondrag = ()=>{ return false }

how to achieve can only be selected, not dragged