html Do not drag and drop selected elements or right mouse button

HTML prohibits dragging, selecting, and right-clicking elements, making it impossible for users to drag and right-click images while browsing Web pages to optimize the experience. It can also be used on text labels, so that when the user moves the mouse to text, the mouse does not change to the selected state (that is, the mouse style changes to: I).

1 Don't Drag Or Right Mouse Button

<img
	src="src"
	class="unselectable"
	draggable="false"
	oncontextmenu="return false;"
 />

Tips

class="unselectable"added a class name in the img element,draggable="false"is to precent drag,oncontextmenu="return false;"is to prevent right mouse button.

2 Adding CSS Properties Disable This Option

<style>
	.unselectable {
	  -moz-user-select: -moz-none;
	  -khtml-user-select: none;
	  -webkit-user-select: none;
	  -o-user-select: none;
	  user-select: none;
	}
<style>

Reference:https://blog.csdn.net/weixin_45066149/article/details/119520229

In addition:If Vue.js,then can add @dragstart.prevent、@selectstart.preventto prevent drag and select in the element tags.

<img class="" src="" @dragstart.prevent />

<div class="" @selectstart.prevent>Copyright © 2021-2022 LIYITONGXUE</div>