Arrastrar y soltar es un concepto muy interactivo y fácil de usar que facilita mover un objeto a una ubicación diferente arrastrándolo. Le permite al usuario hacer clic y mantener presionado el botón del mouse sobre un elemento, arrastrarlo a otra ubicación y soltar el botón del mouse para soltar el elemento allí. En HTML 5, arrastrar y soltar es mucho más fácil de codificar y cualquier elemento se puede arrastrar. Los enlaces y las imágenes se pueden arrastrar de forma predeterminada. Esta función está habilitada principalmente en la mayoría de los sitios web. Google incluso permite a los usuarios realizar una búsqueda de imágenes utilizando la función de arrastrar y soltar imágenes, también conocida como función de arrastre de imágenes. Esta función permite al usuario hacer clic en cualquier imagen y luego arrastrarla a otro lugar. Esto crea una copia transparente de la imagen en la que se hizo clic mientras se mantiene la imagen original en su lugar. Sin embargo,
Método 1: este método establece el atributo arrastrable en falso mediante jQuery.
Sintaxis:
$('#myImage').attr('draggable', false);
Ejemplo:
javascript
<!DOCTYPE html>
<html>
<head>
<title>
How to disable dragging an image
from an HTML page using JQuery?
</title>
<script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js">
</script>
</head>
<body style="text-align:center">
<center>
<h1 style="color:green;">
GeeksforGeeks
</h1>
<h3>
Click on the button to
disable dragging an image
</h3>
<button onclick = "myGeeks()">
Disable image dragging
</button>
<br>
<img id="img" src=
"https://write.geeksforgeeks.org/wp-content/uploads/gfg-39.png">
<script type="text/javascript">
function myGeeks() {
$('#img').attr('draggable', false);
}
</script>
</body>
</html>
Producción:
Método 2: este método establece el atributo arrastrable en falso mediante JavaScript.
Sintaxis:
document.getElementById('myImage').draggable = false;
Ejemplo:
javascript
<!DOCTYPE html>
<html>
<head>
<title>
How to disable dragging an image
from an HTML page using JQuery?
</title>
<script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js">
</script>
</head>
<body style="text-align:center">
<center>
<h1 style="color:green;">
GeeksforGeeks
</h1>
<h3>
Click on the button to
disable dragging an image
</h3>
<button onclick = "myGeeks()">
Disable image dragging
</button>
<br>
<img id="img" src=
"https://write.geeksforgeeks.org/wp-content/uploads/gfg-39.png">
<script type="text/javascript">
function myGeeks() {
document.getElementById('img').draggable = false;
}
</script>
</body>
</html>
Producción:
Publicación traducida automáticamente
Artículo escrito por sanchit496 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA