优雅的防止页面文字选中拖拽问题？

Question

有时页面上的文本被鼠标框选、键盘全选等操作，导致触发鼠标的拖拽机制，这对web体验很差，如图

图中的文本和图片等很容易被鼠标所框选或手贱全选操作，接着鼠标再一拖，那场面就很尴尬了。
如何优雅地解决这样的麻烦？

试过监听页面body的选中和拖拽事件，效果非常明显，直接阻止了除输入/文本框以外的所有的选中和拖拽，代码如下。但是有个缺陷，部分dom（非文本/输入框）上的文本希望保留被框选的功能，这效果明显过头了，不太适合。

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

试着通过CSS来阻止，代码如下。效果和上面的方案一样，缺陷也一致

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

接着缩小范围，但是发现只要有文本能选中，鼠标就能触发拖拽机制，通过单独禁止body的拖拽也无效

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

如何才能做到只能选，不能拖

Answer 1

呃，刚试出可行方案，只对不可选的区域进行CSS限制选中，对整个body的拖拽事件进行屏蔽document.body.ondragstart= ()=>{ return false }