EN
CSS - disable elements dragging
9
points
In this short article, we would like to show how to disable elements dragging using pure CSS.
Quick solution:
.element {
-webkit-user-drag: none; /* Safari */
-khtml-user-drag: none; /* Konqueror HTML */
-moz-user-drag: none; /* Firefox in the past (old versions) */
-ms-user-drag: none; /* Internet Explorer (>=10) / Edge */
-o-user-drag: none; /* Opera */
user-drag: none; /* Currently supported: */
/* Chrome, Opera and Firefox */
}
Practical example
// ONLINE-RUNNER:browser;
<!doctype html>
<html>
<head>
<style>
.disable-dragging {
-webkit-user-drag: none; /* Safari */
-khtml-user-drag: none; /* Konqueror HTML */
-moz-user-drag: none; /* Firefox in the past (old versions) */
-ms-user-drag: none; /* Internet Explorer (>=10) / Edge */
-o-user-drag: none; /* Opera */
user-drag: none; /* Currently supported: */
/* Chrome, Opera and Firefox */
}
img {
width: 200px;
height: 200px;
}
</style>
</head>
<body>
<div>
<div>Dragging disabled:</div>
<img class="disable-dragging" src="https://dirask.com/static/bucket/1631898942509-VMYrnXyYZv--image.png" />
</div>
<br />
<div>
<div>Dragging enabled:</div>
<img src="https://dirask.com/static/bucket/1574890428058-BZOQxN2D3p--image.png" />
</div>
</body>
</html>