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:
xxxxxxxxxx1
.element {2
user-drag: none; /* Safari */3
user-drag: none; /* Konqueror HTML */4
user-drag: none; /* Firefox in the past (old versions) */5
user-drag: none; /* Internet Explorer (>=10) / Edge */6
user-drag: none; /* Opera */7
user-drag: none; /* Currently supported: */8
/* Chrome, Opera and Firefox */9
}
xxxxxxxxxx1
2
<html>3
<head>4
<style>5
6
.disable-dragging {7
user-drag: none; /* Safari */8
user-drag: none; /* Konqueror HTML */9
user-drag: none; /* Firefox in the past (old versions) */10
user-drag: none; /* Internet Explorer (>=10) / Edge */11
user-drag: none; /* Opera */12
user-drag: none; /* Currently supported: */13
/* Chrome, Opera and Firefox */14
}15
16
img {17
width: 200px;18
height: 200px;19
}20
21
</style>22
</head>23
<body>24
<div>25
<div>Dragging disabled:</div>26
<img class="disable-dragging" src="https://dirask.com/static/bucket/1631898942509-VMYrnXyYZv--image.png" />27
</div>28
<br />29
<div>30
<div>Dragging enabled:</div>31
<img src="https://dirask.com/static/bucket/1574890428058-BZOQxN2D3p--image.png" />32
</div>33
</body>34
</html>
