Actualizar Fondo de Perfil Arrastrando Imágenes en Javascript

Actualizar Fondo de Perfil Arrastrando Imagenes en Javascript

En este tutorial crearemos un fondo de perfil de actualización cuando se arrastre una imagen usando JavaScript. Este código cambiará el fondo del perfil del usuario cuando la imagen se arrastre en el cuadro. El código usa ondragstart para obtener la información de la imagen antes de arrastrarla, luego cambiará el perfil de fondo usando ondrop. Este es un tipo de programa fácil de usar, no dude en modificarlo y usarlo en su sistema.

Utilizaremos JavaScript como lenguaje de programación o scripts que le permite implementar cosas complejas en las páginas web. Es ampliamente utilizado en el diseño de un sitio web impresionante. Es un lenguaje de programación interpretado que tiene capacidades orientadas a objetos.

Empezando:
Primero debe descargar el marco de arranque, este es el enlace para el arranque que utilicé para el diseño del diseño https://getbootstrap.com/.

La interfaz principal:
Este código contiene la interfaz de la aplicación. Para crear esto, simplemente escriba este bloque de código dentro del editor de texto y guárdelo como index.html.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" name="viewport" content="width=device-width, initial-scale=1"/>
    <link rel="stylesheet" type="text/css" href="css/bootstrap.css"/>
  </head>
<body>
  <nav class="navbar navbar-default">
    <div class="container-fluid">
      <a class="navbar-brand" href="https://compubinario.com">CompuBinario</a>
    </div>
  </nav>
  <div class="col-md-3"></div>
  <div class="col-md-6 well">
    <h3 class="text-primary">Actualizar Fondo de Perfil Arrastrando Imagenes en Javascript</h3>
    <hr style="border-top:1px dotted #ccc;"/>
    <br /><br />
    <div class="col-md-4">
      <h5>Lista de Imagenes</h5>
      <img src="images/image1.jpg" id="images/image1.jpg" height="100" width="100" draggable="true" ondragstart="drag(event)"/>
      <img src="images/image2.jpeg" id="images/image2.jpeg" height="100" width="100" draggable="true" ondragstart="drag(event)"/>
      <img src="images/image3.jpg" id="images/image3.jpg" height="100" width="100" draggable="true" ondragstart="drag(event)"/>
      <img src="images/image4.jpeg" id="images/image4.jpeg" height="100" width="100" draggable="true" ondragstart="drag(event)"/>
    </div>
    <div class="col-md-8">
      <center><h2>Fondo de Perfil<//center>
      <div style="border:1px solid #000; height:250px; width:350px;" ondrop="drop(event)" ondragover="dragOver(event)"></div>
    </div>
  </div>
<script src="js/script.js"></script>
</body>
</html>

Crear el script:
Este código contiene el script de la aplicación. Este código cambiará el fondo del perfil al arrastrar la imagen a la zona de colocación. Para hacer esto, simplemente copie y escriba este bloque de códigos como se muestra a continuación dentro del editor de texto y guárdelo como script.js dentro de la carpeta js.

function dragOver(e){
  e.preventDefault();
}
  
function drop(e){
  e.preventDefault();
  var data = e.dataTransfer.getData("data");
  e.target.innerHTML = "";
  e.target.style.backgroundImage = "url('"+data+"')";
  e.target.style.backgroundRepeat = "no-repeat";
  e.target.style.backgroundSize = "cover";
  e.target.style.backgroundPosition = "Center";
  
}

function drag(e){
  e.dataTransfer.setData("data", e.target.id);
}

Ahí lo tienes, creamos como Actualizar Fondo de Perfil Arrastrando Imágenes en Javascript. Espero que este sencillo tutorial te ayude a lo que estás buscando.

Antes de la descarga del Tutorial presiona el siguiente enlace para que te suscribas a nuestro Canal de YouTube:

SUSCRIBETE AL CANAL DE YOUTUBE AQUI !

Actualizar Fondo de Perfil Arrastrando Imágenes en Javascript – Descargar el Tutorial en el siguiente enlace:

DESCARGAR AQUÍ

Deja un comentario

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