En este tutorial crearemos un área de texto de relleno cuando se arrastre usando JavaScript. Este código rellenará automáticamente un área de texto HTML cuando el usuario arrastre un elemento de texto hacia él. El código usa el método ondrop () para recuperar y usar el valor del elemento de la identificación enlazada, con el fin de completar la base del valor del área de texto en la salida del elemento arrastrado. Este es un programa gratuito, puede modificarlo y usarlo como propio.
Utilizaremos JavaScript como lenguaje de script del lado del servidor porque permite un mayor control del comportamiento de su página web que HTML solo. Está incrustado en HTML que se encarga de permitir al usuario interactuar con la computadora.
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="navabr 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">Rellenar Área de Texto Cuando se Arrastra en Javascript</h3>
<hr style="border-top:1px dotted #ccc;"/>
<div class="col-md-6">
<div class="form-group">
<textarea class="form-control" id="input" ondrop="drop(event)" ondragover="dragOver(event)" style="resize:none;" readonly="readonly"/></textarea>
</div>
<center><button class="btn btn-primary" onclick="submit();">Agregar</button></center>
<br />
<div class="alert alert-info">Mis Cursos</div>
<div id="result"></div>
<br /><br />
<button class="btn btn-success" id="btn_reset" style="display:none;" onclick="reset();">Reset</button>
</div>
<div class="col-md-6">
<h4 id="Programacion" draggable="true" ondragstart="drag(event)">Programacion</h4>
<h4 id="Matematicas" draggable="true" ondragstart="drag(event)">Matematicas</h4>
<h4 id="Lenguaje" draggable="true" ondragstart="drag(event)">Lenguaje</h4>
<h4 id="Horse Riding" draggable="true" ondragstart="drag(event)">Fisica</h4>
<h4 id="Cooking" draggable="true" ondragstart="drag(event)">Quimica</h4>
<h4 id="Boxing" draggable="true" ondragstart="drag(event)">Arte</h4>
<h4 id="Driving" draggable="true" ondragstart="drag(event)">Ensamblaje</h4>
<h4 id="Baseball" draggable="true" ondragstart="drag(event)">Derecho</h4>
</div>
</div>
<script src="js/script.js"></script>
</body>
</html>
Crear el guión:
Este código contiene el script de la aplicación. Este código rellenará automáticamente el área de texto cuando se arrastre el objeto. 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.
var cursos=[];
function dragOver(e){
e.preventDefault();
}
function drop(e){
e.preventDefault();
var data = e.dataTransfer.getData("data");
document.getElementById('input').value = data;
}
function drag(e){
e.dataTransfer.setData("data", e.target.id);
}
function submit(){
var input = document.getElementById('input').value;
cursos.push(input);
var data=cursos.join(" ,");
if(input !=""){
document.getElementById('result').innerHTML = data;
document.getElementById('input').value="";
document.getElementById('btn_reset').style.display="inline";
}else{
alert("Please drag something first!");
}
}
function reset(){
document.getElementById('result').innerHTML = "";
document.getElementById('btn_reset').style.display="none";
}
Ahí lo tienes, creamos con éxito un área de texto de relleno cuando se arrastra usando JavaScript.
Antes de la descarga del Tutorial presiona el siguiente enlace para que te suscribas a nuestro Canal de YouTube:
