• Resuelto patriquin

    (@patriquin)


    Hola!

    Mi clienta quiere que evitemos el click derecho para descargar las fotos (esto lo he conseguido con código), pero también la posibilidad de arrastrar la foto y llevarla a una carpeta. Esto no sé si funciona con Windows, con Apple sí es verdad que puedes arrastrar la foto a otra carpeta y se te guarda 🥴

    ¿Alguien sabe cómo se podría evitar eso con código? Preferiría evitar plugins, he estado buscando, pero no he dado con la clave.

    ¡Muchas gracias!

    Un saludo

Viendo 7 respuestas - de la 1 a la 7 (de un total de 7)
  • Hola @patriquin

    Se puede conseguir con CSS:

    img { pointer-events: none; }

    Esta propiedad indica que el puntero del mouse no interactúa con la imagen, lo que significa que no se puede hacer clic derecho ni arrastrarla.

    Limitaciones:

    • No funciona en todos los navegadores: Algunos navegadores más antiguos no admiten la propiedad pointer-events.
    • Afecta a la interacción con la imagen: Al deshabilitar los eventos del puntero, también se deshabilita la posibilidad de hacer zoom o ver la imagen en una nueva pestaña.

    También se puede hacer con Javascript, usando el evento dragstart:

    JavaScript
    document.querySelectorAll("img").forEach((img) => {
      img.addEventListener("dragstart", (e) => {
        e.preventDefault();
      });
    });

    Esto funciona bien en navegadores modernos y permite interacción con la imagen (aunque quizá no quiereas que se interactúe).

    Yo usaría la solución CSS y, en todo caso, añadir algo de Javascript para navegadores antiguos:

    document.querySelectorAll("img").forEach((img) => {
      // Detectar navegadores antiguos que no admiten pointer-events
      if (window.CSS && !window.CSS.supports("pointer-events", "none")) {
        img.addEventListener("dragstart", (e) => {
          e.preventDefault();
        });
      }
    });

    Espero que te sirva. Si es así, recuerda cerrar este hilo.

    Saludos.

    Hola @patriquin Soy Miguel Ángel, no he entendido muy bien, lo que quieres hacer, ¿Te refieres a que no se pueda meter los medios de tu sitio, como fotos en carpetas? dentro del mismo WordPress o externamente, si puedes pasar la URL con un ejemplo te lo agradezco, gracias

    Iniciador del debate patriquin

    (@patriquin)

    Hola, @jrberguill y @miguelangeleu

    Muchísimas gracias por vuestras respuestas.
    Me parece muy interesante lo que comentas @jrberguill, lo probaré, aunque la solución del click derecho la tengo resuelta. Mi problema ahora es lo otro, que las fotos si se arrastran fuera de la web se pueden guardar en el ordenador (que tal vez esto solo sea cosa de Apple, no lo sé). Os he hecho un video para que podáis ver a qué me refiero:

    https://www.loom.com/share/deda9bfd51a444cf8fa323857198a704

    Tal vez no haya solución, tal vez inhabilitarlo, afectaría también a la acción de subir fotos a la web arrastrando… Eso ya la clienta tendría que valorar si no le importa darle al botón de subir archivo, en lugar de arrastrar.

    Muchas gracias de nuevo!
    Un saludo

    Hola.

    En Windows también se puede arrastrar la foto a una carpeta.

    Prueba la solución CSS. No creo que afecte a que la clienta pueda subir fotos arrastrándolas ya que imagino que lo hará desde el administrador y no desde el frontal.

    Iniciador del debate patriquin

    (@patriquin)

    Hola, @jrberguill

    Me funciona perfecto y en Chrome, Firefox y Safari.
    Muchas gracias!
    Un saludo

    Yo en su día instalé este plugin https://wordpress.org/plugins/secure-copy-content-protection/ que entre una de las características que tiene es evitar el «drag and drop» con texto e imagen, pruébalo y nos dices si te funcionó , como complemento a este plugin, hay además este: https://wordpress.org/plugins/wp-content-copy-protector/

    ¡Saludos y suerte, ya nos dices!

    Iniciador del debate patriquin

    (@patriquin)

    ¡Muchas gracias @miguelangeleu!

    He probado ya con lo que ha dicho el otro compañero y me funciona perfecto, prefiero evitar poner más plugins, pero me lo guardo para echarle un vistazo y ver todas las posibilidades 😊

    Gracias!
    Un saludo

Viendo 7 respuestas - de la 1 a la 7 (de un total de 7)
  • Debes estar registrado para responder a este debate.