Introduccion:

Ola k ase

Objetivos:
Boom Nena
 API Drag and Drop
Drag and Drop, abreviado como DnD o tambin conocido en espaol como Arrastrar y Soltar. Es un
evento de soporte nativo en la mayora de los navegadores, la cual se ejecuta a travz de JavaScript.
Este evento se puede activar con el cursor de nuestro ordenador, siempre y cuando hayamos creado
elementos que se puedan arrastrar en nuestra pgina web.

Este tipo de accin es conocida a nivel de programacin como Evento, ya que las acciones se
realizaran mientras que el usuario haga clic sobre el objeto y lo arrastrarlo a su antojo.
Al ser una propiedad nativa de los navegadores, esto permite crear una pgina web ms interactiva.

Para crear aplicar estas propiedades de arrastre, primero es necesario conocer los eventos que se
pueden dar en DnD.

- ondragstart: se inicializa cuando comienza la actividad de arrastrar.

- ondrag: est activo en cada movimiento del mouse cuando se arrastra un elemento.

- ondragenter: sucede cuando el elemento arrastrado ingresa a un receptor de soltado.

- ondragleave: sucede cuando el elemento arrastrado sale de un receptor de soltado.

- ondragover: Tiene lugar con cada movimiento del mouse cuando se arrastra un elemento dentro
del rea de un receptor de soltado.

- ondrop: se produce cuando el elemento arrastrado es soltado dentro del rea de un receptor de
soltado.

- ondragend: es producido cuando se termina el proceso de arrastre. Aun cuando el elemento

arrastrado es dejado dentro o fuera de un elemento receptor de soltado.

Adems de esta serie de eventos es importante mencionar la propiedad datatransfer. Es el centro de

desarrollo de toda la actividad de la funcin DnD, ya que contiene los datos que se envan en la
accin de arrastre. La propiedad dataTransfer se establece en el evento dragstart y se lee/procesa en
el evento drop. Al activar e.dataTransfer.setData(format, data), se establece el contenido del objeto
en el tipo MIME y se transmite la carga de datos en forma de argumentos.

Los mtodos de datatransfer son:

- setData: su uso se basa en declarar los datos que sern enviados y su tipo. Adems, tambin
recibe datos especiales como url y text y datos regulares como text/html y text/plain. Cualquier otro
tipo de dato se puede especificar en caso de que sea necesario.

- clearData: elimina los datos del tipo especificado

- getData: es necesario para la extraccin de los datos de arrastre por tipo MIME.

- setDragImage: personaliza la imagen que aparece al lado del puntero cuando el elemento est
siendo arrastrado. Utiliza el tamao X,Y de la imagen
 - Type: permite obtener un arreglo con todos los tipos de elementos utilizados en el evento
dragstart

-files: retorna una lista de los archivos que estn siendo arrastrados

-dropEffect: retorna el tipo de operacin solicitada para el elemento arrastrado. Los valores
posibles son: copy, move, link y none.

-effectAllowed: retorna el tipo de operacin que se ha permitido. Los valores posibles son: copy,
move, link, copyLink, copyMove, linkMove, all, none y uninitialized.

Generalmente, todo este proceso para el arrastrado de objetos, necesitamos tener

- Un objeto arrastrable, dndole la propiedad draggable=true.

- Un Receptor de Soltado, Es el que recibir el objeto que se arrastra, al momento de soltarlo. Para
indicar el receptor de soltado, al elemento o elementos que utilicemos para este fin debemos poner
los eventos ondragover y ondrop.
<div id="soltado" ondragover="evdragover(event)" ondrop="evdrop(event)"></div>

- Crear los mtodos y las nuevas propiedades para los objetos de arrastre y receptores,
Los mtodos se crean en JavaScript y utilizamos las funciones que nos regresaran los
valores que necesitamos para operar con los objetos. A travs de todas funciones
anteriormente mencionadas.

Tambin podemos usar esta api para arrastrar no solamente objetos dentro de la pgina web,
tambin podemos arrastrar los archivos desde nuestro ordenador para incluirlos donde sean
necesarios, por ejemplo para subir un archivo, una imagen se puede hacer arrastrando directamente
el archivo hacia el objeto receptor, y obtendr la ruta del archivo por medio de la funcin
dataTransfer.files la cual devuelve una lista con los archivos que se estn arrastrando hacia adentro
del navegador.
Ejemplo: API Drag o drop.
Ejemplo1
Arrastrando elementos hacia otro elemento
Archivo index.html.
--html

<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="utf-8"/>
<meta name="description" content="Ejemplo de HTML5">
<meta name="keywords" content="HTML5, CSS3, JavaScript">
<title>Este texto es el ttulo del documento</title>
<link rel="stylesheet" href="dragdrop.css">
<script src="dragdrop.js"></script>

</head>
<body>
<div id="agrupar">
<header id="cabecera">
<h1>Ejemplo drag and drop</h1>
</header>
<section id="seccion">
<article>
<header>
<h1>Arrastre los numeros pares hacia esta
caja</h1>
</header>
<div id="cajasoltar">
Arrastre y suelte las imgenes aqu
</div>
</article>
</section>
<aside id="columna">
<div id="cajaimagenes">
<img id="imagen1" src="8.jpg">
<img id="imagen2" src="20.jpg">
<img id="imagen3" src="2.jpg">
<img id="imagen4" src="1.jpg">
</div>
</aside>
<footer id="pie">
Derechos Reservados &copy
</footer>
</div>
</body>
</html>

Archivo dragdrop.css
--CSS--
body{
text-align: center;
}

article{
background: #006699;
border: 1px solid #000;
margin-bottom: 15px;
padding: 20px;
text-align: center;
}
article footer{
text-align: right;
}
h1{
font: bold 20px Verdana,sans-serif;
}
h2{
background: #ccc;
color: #FF0000;
border: 3px solid #000;
font: bold 20px Verdana,sans-serif;
margin: 10px 20px;
padding: 20px;
text-align: center;
}

header, section, footer, aside, article, {

display: block;
}
#agrupar{
width: 960px;
margin: 15px auto;
text-align: left;
}
#cabecera{
font:bold 14px sans-serif;
background: rgb(75,173,190);
border: 3px solid #000;
border-radius: 7px;
box-shadow: #999 0px 0px 10px;
margin: 20px 100px;
padding: 15px 5px;
text-align: center;
text-shadow: #fff 0px 0px 10px;
}
#cabecera h1{
text-shadow: #FFF 0px 0px 10px ;
}
#cajasoltar{
background: #fff;
border: 2px solid #000;
 border-radius: 5px;
box-shadow: #FFF 0px 0px 100px;
height: 250px;
margin: 10px;
text-align: center;
width: 300px;
width: 500px;
}
#cajaimagenes{
background: rgb(45,84,221);
border: 2px solid #000;
border-radius: 5px;
height: 250px;
margin: 10px;
padding: 10px;
}
#cajaimagenes > img{
background: #fff;
border: 2px solid #fff;
border-radius: 15px;
height: 65px;
margin: 2px;
padding: 5px;
width: 65px;
}
#columna{
background: #CCCCCC;
float: left;
margin: 20px 0px;
padding: 20px;
width: 220px;
}
#pie{
background: rgb(75,173,190);
border-top:3px solid #000000;
clear: both;
padding: 20px;
text-align: center;
}
#seccion{
float: left;
width: 660px;
margin: 20px;
}

Archivo dragdrop.js
--JS
function iniciar(){
var imagenes=document.querySelectorAll('#cajaimagenes > img');
for(var i=0; i<imagenes.length; i++){
//declara el escuchador de
//cada imagen
imagenes[i].addEventListener('dragstart', arrastrado, false);
imagenes[i].addEventListener('dragend', finalizado, false);
imagenes[i].addEventListener('mousemove', mouseentrando, false);
imagenes[i].addEventListener('mouseleave', mousesaliendo, false);

}
//se relaciona con el elemento cajasoltar
//en el el codigo html
soltar=document.getElementById('cajasoltar');
//se define los escuchadores de los eventos para este elemento
soltar.addEventListener('dragenter', entrando, false);
soltar.addEventListener('dragleave', saliendo, false);
soltar.addEventListener('dragover', function(e){
e.preventDefault(); }, false);
soltar.addEventListener('drop', soltado, false);
}
function arrastrado(e){
elemento=e.target;
soltar.style.border='4px solid rgb(237,28,36)';
e.dataTransfer.setData('Text', elemento.getAttribute('id'));
}
function entrando(e){
e.preventDefault();
soltar.style.background='rgba(0,150,0,0.5)';
}
function finalizado(e){
elemento=e.target;
e.preventDefault();
soltar.style.background='#FFF';
soltar.style.border='2px solid #000';
}
function saliendo(e){
e.preventDefault();
soltar.style.background='#FFF';
}
function soltado(e){
e.preventDefault();
elemento=e.target;
var id=e.dataTransfer.getData('Text');
if(id!="imagen4"){
document.getElementById(id).style.visibility='hidden';
var src=document.getElementById(id).src;
soltar.innerHTML='<img src="'+src+'">';
}else{
soltar.innerHTML='<h2>Este es un numero impar</h2>';
elemento.style.visibility='visible';
}
}
function mouseentrando(e){
elemento=e.target;
elemento.style.border='5px solid #000';
}
function mousesaliendo(e){
elemento=e.target;
elemento.style.border='2px solid #fff';
}
//Esto ejecuta el metodo iniciar()
//cuando la pagina es cargada en el navegador
window.addEventListener('load', iniciar, false);

Resultado:

Ejemplo2:
Arrastrando archivos desde aplicacin externa a la pgina.
Archivo index.html.

<!DOCTYPE html>
<html lang="es">
<head>
<title>Drag and Drop</title>
<link rel="stylesheet" href="dragdrop.css">
<script src="dragdrop.js"></script>
</head>
<body>
<section id="cajasoltar">
Arrastre y suelte archivos en este espacio
</section>
</body>
</html>

Archivo dragdrop.css

#cajasoltar{
float: left;
width: 500px;
height: 300px;
margin: 10px;
border: 1px solid #999;
}

Archivo dragdrop.js
 function iniciar(){
soltar=document.getElementById('cajasoltar');
soltar.addEventListener('dragenter', function(e){
e.preventDefault(); }, false);
soltar.addEventListener('dragover', function(e){
e.preventDefault(); }, false);
soltar.addEventListener('drop', soltado, false);
}
function soltado(e){
e.preventDefault();
var archivos=e.dataTransfer.files;
var lista='';
for(var f=0;f<archivos.length;f++){
lista+='Archivo: '+archivos[f].name+'
'+archivos[f].size+'<br>';
}
soltar.innerHTML=lista;
}
window.addEventListener('load', iniciar, false);

Resultado: