html拖拽没有文字不能拖拽,优雅的防止页面文字选中拖拽问题？

有时页面上的文本被鼠标框选、键盘全选等操作，导致触发鼠标的拖拽机制，这对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 }

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