Hola a todos como hago para evitar que el ratón de la PC al dar click en la imagen
no pueda arrastrarse en la pagina web, no se si me explico bien pero dicha imagen que tengo tiene un atributo src
que llama a un Servlet y si lo arrastro hacia un campo de texto
pues entonces muestra la URL con el nombre del Servlet que lo llamó.
Quiero evitar eso como se puede hacer.
Cualquier código que solucione esto sería bueno.
2 respuestas
Opción CSS
Solo con CSS
puede usar pointer-events: none;
img {
pointer-events: none;
}
<input />
<img src="https://picsum.photos/id/237/200/300">
Opción JS
Suscribimos una función al evento dragstart
del document
en la cual detectamos si el elemento que se esta intentando arrastrar es una imagen y lo evitamos.
Con JS
puro:
// Event delegation
document.addEventListener('dragstart', function(evt) {
if (evt.target.tagName == 'IMG') {
evt.preventDefault();
}
});
<input />
<img src="https://picsum.photos/id/237/200/300">
Con jQuery
$(document).on('dragstart', 'img', function(evt) {
evt.preventDefault();
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input />
<img src="https://picsum.photos/id/237/200/300">
Nota: El pro de utilizar estas técnicas, es que no tienes que agregar manualmente a todas las imágenes un atributo.
Puedes logar lo que quieres utilizando la propiedad HTML draggable
asi:
<img id="myImage" draggable="false" src="https://picsum.photos/id/237/200/300">