¿Cómo hacer que una imagen se pueda arrastrar en HTML5?

Arrastrar y soltar es una característica muy común y ampliamente utilizada en un sitio web moderno. Simplemente significa arrastrar una imagen con el cursor y soltarla en cualquier otro lugar. En este artículo, vamos a aprender cómo hacer que una imagen se pueda arrastrar usando HTML 5.

Hacer que cualquier elemento HTML5, incluidas las imágenes, se pueda arrastrar es bastante fácil. Tomamos la ayuda del atributo ‘arrastrable’ . Toma true, false o auto como argumentos. El valor predeterminado es automático . La propiedad arrastrable depende del navegador. Si establecemos el valor verdadero , entonces la imagen se puede arrastrar. Si establecemos el valor falso, la imagen no se puede arrastrar. 

Sintaxis:

<img src="" alt="" draggable="true">

Ejemplo:

HTML

<!DOCTYPE html>
<html lang="en">
  <body>
    <h2 style="color: green">GeeksforGeeks</h2>
  
    <p><b>Draggable image</b></p>
  
    <img src=
"https://media.geeksforgeeks.org/wp-content/uploads/20210810224356/geeksimage2-200x146.png"
         alt="image" draggable="true"/>
  </body>
</html>

Producción:

Imagen arrastrable

Publicación traducida automáticamente

Artículo escrito por akashkumarsen4 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *