Arrastrar y Soltar con JavaScript

Arrastrar y soltar con JavaScript (Drag And Drop)

Si bien el nuevo HTML5 trea esta funcion pero creo que es necesario conocer el efecto de arrastrar y soltar con javaScript ya que aunque el propio HTML5 lo trea aun asi tenemos que recurir a javaScript para producir dicho efecto de arrastrar y soltar.

Arrastrar y soltar ver ejemplo

Lo que veremos vasicamente en este codigo seran 2 archivos uno HTML el cual contendra nuestras etiquetas html y en en cual se reflejara dicho efecto de arrastrar y soltar con javaScript, tambien vamos a tener otro fichero.js que es el cual tendra las instrucciónes que nos permitira sumular dicho efecto.

Bueno sin mas nada empesemos con nuestro codigo HTML5

Index.html

<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="utf-8" />
<script src="arrastra.js" type="text/javascript"></script>
<title>Atrastrar y soltar con JavaScript</title>
</head>
<div id="arrastrar"> 
<h1>Efecto Arrastrar y soltar con javaScript (Drag And Drop)</h1>
</div>
<body>
</body>
</html>

Si te fijas en el codigo es un documento HTML5 normal simplemente hemos creado la estructura HTML5 del documento porque todo lo otro lo vamos hacer con JavaScript entonces para ello enlazamos un documento javascript con la siguiente linea de codigo dentro de la etiquetas <head></head> que es la siguiente
<script src=”arrastra.js” type=”text/javascript”></script>

Ahora ponemos nuestro documento javaScript el cual realizara el efecto que queremos conseguir en este caso de arrastrar y soltar.

arrastrar.js

addEvent(window,'load',inicializarEventos,false);
function inicializarEventos(e)
{
  var ob=document.createElement('div');
  var texto=document.createTextNode('Arrastrame');
  ob.appendChild(texto);
  ob.style.textAlign='center';
  ob.style.left='0px';
  ob.style.top='0px';
  ob.style.width='100px';
  ob.style.height='100px';
  ob.style.border='solid 5px #DEDEDE';
  ob.style.opacity='0.5';
  ob.style.color='blue';
  ob.style.borderRadius='5px';
  ob.style.background='-moz-linear-gradient(#FFF 0%, #DEDEDE 100%)';
  ob.style.position='relative';
  var x=document.getElementsByTagName('div');
  x[0].appendChild(ob);
  var recu1=new Recuadro(ob);
}
Recuadro=function(div)
{
    tX=0;
    tY=0;
    difX=0;
    difY=0;

    addEvent(div,'mousedown',inicioDrag,false);

    function coordenadaX(e)
    {
      if (window.event)
        return event.clientX+document.body.scrollTop;
      else
        return e.pageX;
    }

    function coordenadaY(e)
    {
      if (window.event)
        return event.clientY+document.body.scrollTop;
      else
        return e.pageY;
    }

    function inicioDrag(e) 
    {
      if (window.event)
        e=window.event;
      var eX=coordenadaX(e);
      var eY=coordenadaY(e);
      var oX=parseInt(div.style.left);
      var oY=parseInt(div.style.top);
      difX=oX-eX;
      difY=oY-eY;
      addEvent(document,'mousemove',drag,false);
      addEvent(document,'mouseup',soltar,false);
    }

    function drag(e) 
    { 
      if (window.event)
        e=window.event;
      tX=coordenadaY(e)+difY+'px';
      tY=coordenadaX(e)+difX+'px'
      div.style.top=tX; 
      div.style.left=tY; 
    }
 

    function soltar(e)
    { 
      if (window.event)
      {
        document.detachEvent('onmousemove',drag);
        document.detachEvent('onmouseup',soltar);
      }  
      else
      {
        document.removeEventListener('mousemove',drag,false);
        document.removeEventListener('mouseup',soltar,false);
      }
    }
}

function addEvent(elemento,nomevento,funcion,captura)
{
  if (elemento.attachEvent)
  {
    elemento.attachEvent('on'+nomevento,funcion);
    return true;
  }
  else 
    if (elemento.addEventListener)
    {
      elemento.addEventListener(nomevento,funcion,captura);
      return true;
    }
    else
      return false;
}

Si te has fijado en el codigo lo que hacemos es crear un div a través de DHTML y a ese div agregarle varios atributos CSS y atreves del atributo “mousemove” y “mouseup” maanupularlo para conseguir el efecto de arrastrar y soltar.

Importancia de Arrastrar y Soltar usando JavaScript

No se si lo has notado, pero durante los últimos tiempos esta tecnología de arrastrar y soltar ha ido aumentando en internet de una forma muy considerable, con el aumento de los sitios web basados en CMS o manejadores de contenidos esto se ha expandido de una forma muy rápida, ¿Te has fijado el efecto de la red social Facebook.com? Al igual que Twitter todos estos sitios grandes saben lo importante que es esta tecnología para los usuarios por esa razón la integran en sus plataformas.

Deja un comentario

Tu dirección de correo electrónico no será publicada.