En este tutorial crearemos una imagen de eliminación dinámica de arrastrar y soltar usando JavaScript. Este código eliminará dinámicamente la imagen cuando se suelte en la zona de colocación. El código usa la función de arrastrar y soltar de JavaScript para eliminar dinámicamente la imagen proporcionando una identificación en el evento ondragstart (). Un programa fácil de usar para que pueda modificarlo y comprenderlo sin facilidad.
Utilizaremos JavaScript como lenguaje de script del lado del servidor que interpreta un programa para extender un nivel completamente nuevo de experiencia HTML. Un lenguaje de secuencias de comandos que se utiliza de diferentes maneras y proporciona un nivel completo de experiencia al visitar un sitio web.
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">Imagen para Eliminación Dinámica de Arrastrar y Soltar en JavaScript</h3>
<hr style="border-top:1px dotted #ccc;"/>
<div class="col-md-8">
<img id="img1" src="image/image1.jpg" height="80" width="120" style="border:1px solid #000; float:left; margin-left:10px;" draggable="true" ondragstart="drag(event)"/>
<img id="img2" src="image/image2.jpg" height="80" width="120" style="border:1px solid #000; float:left; margin-left:10px;" draggable="true" ondragstart="drag(event)"/>
<img id="img3" src="image/image3.jpg" height="80" width="120" style="border:1px solid #000; float:left; margin-left:10px;" draggable="true" ondragstart="drag(event)"/>
</div>
<div class="col-md-4">
<center><img src="image/trash.png" height="150" width="150" ondrop="drop(event)" ondragover="dragOver(event)"/></center>
</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 eliminará la imagen arrastrable cuando suelte la zona objetivo. Para hacer esto, simplemente copie y escriba este bloque de códigos dentro del editor de texto, luego 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");
var el = document.getElementById(data);
el.parentNode.removeChild(el);
alert("Image deleted!");
}
function drag(e){
e.dataTransfer.setData("data", e.target.id);
}
Ahí lo tienes, creamos con éxito una imagen de eliminación dinámica de arrastrar y soltar usando JavaScript.
Antes de la descarga del Tutorial presiona el siguiente enlace para que te suscribas a nuestro Canal de YouTube:
